Highcharts heatmap chart labels render extremely slow - highcharts

Question

I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?

Answer 1

The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/