CODEWITHSUNDEEP
javascriptjqueryperformancehighcharts
terr4x
terr4x

Reputation: 113

Highcharts slow performance when adding more than 10 series

I am adding the series using the code below. Now we are talking of 10~20 series, the UI freezes while doing so and it becomes increasingly slow. And this happens in a PC browser. My hope is to use these charts in a Android WebVIEW on a tablet (kitkat).

Any suggestions how to increase performance?

            for (var x in currentSerie) {
                chart.addSeries({
                    name: currentSerie[x].Name,
                    data: currentSerie[x].Data,
                    lineWidth: currentSerie[x].lineWidth || 1,
                    color: currentSerie[x].color || '',
                    dataGrouping: {
                        approximation: "average",
                        enabled: false,
                        forced: true,
                        units: [['hour', [1]]]
                    },
                    marker: {
                        enabled: true,
                        radius: 1
                    },
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: currentSerie[x].Unit || ''
                    },
                    shadow: false,
                }, false);

            }

            chart.redraw();

Upvotes: 3

Views: 3810

Answers (2)

frank
frank

Reputation: 61

I had the same issue and found the following to be the culprit.

marker: {
    enabled: true,
    radius: 1
},

If you remove forcing the markers to be enabled and let the chart determine when to display the markers, the performance is much better.

Upvotes: 5

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

As it looks like you are using Highstock (because of the dataGrouping), this is a clear point of performance gain. You've set it to be enabled: false. Setting it to true for large amounts of data can help immensely. From the datagrouping documentation:

Data grouping replaces a sequence of data points in a series with one grouped point...

Grouping is activated [if] there are many data points in the chart. As well as increasing performance it makes it easier to spot trends in a chart.

Some other general performance gains for Highcharts charts can be found from the FAQ:

When working with series with a high number of data points, there are a few things to consider.

  1. For line plots, it is recommended that you disable point markers, as these will add a performace overhead. See http://highcharts.com/demo/line-time-series.

  2. Disabling shadows increases performance, as three shadow elements are created for each shape that includes a shadow.

  3. For large column series, it is recommended that you disable the initial animation, plotOptions.column.animation, at least for VML based browsers. The best way to distinguish between fast SVG browsers and slower VML browsers is to use the Highcharts.svg boolean property.

Upvotes: 0

Related Questions