Slow Highcharts performance with thousands of series - performance

Question

I am using Highcharts in my project and sometimes I need to display 2000+ series on the chart.
The time of adding series and redrawing a chart is really high. Is there any way to make it to display faster?
What I have already done:
Series added without redrawing, then I call chart.redraw()
Disabled animation
Disabled dataGrouping
Here are the results (adding 2000 and 4000 series to an empty chart):
Chrome 44.0.2403.157 m:
Total series count: 2000
Series added: 5775ms
Chart redrawed: 11351ms
Total series count: 4000
Series added: 36497ms
Chart redrawed: 51985ms
Firefox 40.0.2
Total series count: 2000
Series added: 1769ms
Chart redrawed: 7405ms
Total series count: 4000
Series added: 6153ms
Chart redrawed: 23464ms
IE 11
Total series count: 2000
Series added: 14547ms
Chart redrawed: 50153ms
Total series count: 4000
Series added: 66558ms
Chart redrawed: 229382ms (229 seconds!!)
Could you please tell me, is there any way to increase the speed?
Thank you.
Here is the code jsfiddle
$(function () {
var addManySeries = function(count)
{
var seriesToAdd = count;
var d = [];
var temp = [];
for (var i = 0; i < seriesToAdd; i++) {
temp = [];
for (var j = 0; j < 10; j++) {
temp.push(Math.random() * 1000);
}
d.push({data: temp, name: 'Series ' + i.toString()});
}
$('#log').append("<br/>Total series count: " + (chart.series.length + d.length).toString());
var s = Date.now();
for (var i = 0; i < seriesToAdd; i++) {
chart.addSeries(d[i], false);
}
$('#log').append("<br/>Series added: " + (Date.now() -s).toString() + "ms");
chart.redraw();
console.log((Date.now() - s).toString());
$('#log').append("<br/>Chart redrawed: " + (Date.now() - s).toString()+ "ms");
};
var chart_options = {
chart:{
type:'line',
renderTo: 'container',
animation: false
},
plotOptions: {
line: {
animation: false,
shadow: false,
marker:{
enabled: false
}
}
},
tooltip:{
animation : false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: {
dataGrouping: false
}
};
chart = new Highcharts.Chart(chart_options);
var chart_options = {
chart:{
type:'line',
renderTo: 'container',
animation: false
},
plotOptions: {
line: {
animation: false,
shadow: false,
marker:{
enabled: false
}
}
},
tooltip:{
animation : false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: {
dataGrouping: false
}
};
chart = new Highcharts.Chart(chart_options);
$('#add2000Series').click(function() {
addManySeries(2000);
});
$('#add4000Series').click(function() {
addManySeries(4000);
});
});

Answer 1

A few things:
1) 2000 series x 10 points is 20000 elements in SVG, try to test pushing native element and measure
2) dataGrouping is available only in Highstock and should be defined in plotOptions not series
3) Why you use a addSeries multiple time, instead of prepare a array of series objects in native javascript?
4) You can use a boost module