problem Highchart Show/Hide data label on hover legend

Question

This sample for Highchart show/hide data label by mouseover on depended legend series;

 plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            },
            events: {
                mouseOver: function(event) {
                    $.each(this.data, function(i, point){
                        point.dataLabel.show();
                    });
                },
                mouseOut: function(event) {
                    $.each(this.data, function(i, point){
                        point.dataLabel.hide();
                    });
                }
            }
        }
    },

But it is difficult to display numbers in common places.

How to resolve this??

Thanks in advance.

Sample: JSFiddle

Answer 1

You need to enable the allowOverlap option for data labels:

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      allowOverlap: true
    },
    ...
  }
}

---

Live demo: http://jsfiddle.net/BlackLabel/72r5kfcn/

API Reference: https://api.highcharts.com/highcharts/series.line.dataLabels.allowOverlap