CODEWITHSUNDEEP
javascripthighchartscollision-detection
Jesse Holwell
Jesse Holwell

Reputation: 13

Highcharts - Overlapping scatterplot labels are not readable

I want to clearly display all data labels for a scatter chart made with highcharts.

I have a scatter chart where there is a chance the points could be overlapping or very close together. By default highcharts hides any overlapping labels but I require all labels to be visible. I have tried setting 'allowOverlap: true'. This makes all labels show like I want, but the labels are not always readable. Is there any cleaner way of ensuring all labels are visible on a scatter chart, or has anyone been able to detect and offset overlapping labels?

JSFiddle where only three of four labels are displayed: https://jsfiddle.net/jholwell/vbc58Luh/

Highcharts.chart('container', {
    series: [{
        data: [[1, 1], [1.8, 1.8], [1.9, 1.8], [5, 2]],
        type: 'scatter'
    }],
    plotOptions: {
      scatter: {
        dataLabels: {
            enabled: true,
        }
      }
    }

});

Upvotes: 1

Views: 1030

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

Highcharts currently doesn't have collision detection for labels, but building on an answer to a similar question, you can implement your own collision detector (here: staggerDataLabels()) and run it on the chart's load and redraw events:

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        staggerDataLabels(this.series);
      },
      redraw: function() {
        staggerDataLabels(this.series);
      }
    },
  },
  ...
});

function staggerDataLabels(series) {
  ...

https://jsfiddle.net/vbc58Luh/2/

Upvotes: 3

Related Questions