Highcharts - degraded tooltip rendering performance

0
votes

I'm using Highcharts in an Angular 8 application, and while the chart itself renders quite fast, I am encountering some seriously degraded performance rendering tooltips on charts bound to larger data sets. Interestingly the issue seems less related to the number of data points than to the amount of the plot area series fill.

We are using Boost (in app.module.ts):

Boost(Highcharts);
NoData(Highcharts);
More(Highcharts);
NoData(Highcharts);
theme(Highcharts);

and this is is the chart's config (series are added dynamically):

public baseChartOptions: Highcharts.Options = {
chart: {
  type: 'line',
  zoomType: 'x',
  animation: false,
  height: '55%'
},
boost: {
  enabled: true,
  useGPUTranslations: true,
  usePreallocated: true
},
legend: {
  enabled: true,
  align: 'center',
  verticalAlign: 'bottom',
  layout: 'horizontal'
},
exporting: { enabled: false },
plotOptions: {
  series: {
    lineWidth: 1.5,
    animation: false,
    marker: {
      enabled: false
    }
  }
},
xAxis: [
  {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%m/%d'
    }
  } as Highcharts.XAxisOptions
],
yAxis: [
  {
    minorTickLength: 0,
    tickLength: 0,
    title: {
      text: ''
    }
  }
],
tooltip: {
  shared: true,
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.0f}</b><br/>',
  animation: false
},
series: []

};

What are best practices for ensuring the best performance in rendering tooltips? I've seen the Highcharts demo showing over 1,000,000 points with good performance, but I don't seem to be able to achieve the same.

I've included a short video converted to gif that illustrates the behavior I'm seeing at three different data densities.

Thanks for your help!

highcharts tooltip performance

1
highcharts

1 Answers

0
votes

The performance should be better when you disable shared tooltip:

  tooltip: {
    animation: false,
    valueDecimals: 2,
    shared: false
  }

Demo: