Improving Highcharts Bar Chart Performance

Question

I use Highcharts to create a scalable line chart with 1440 data points, here is JSFiddle .

In Firefox, chart performance is very sloppy, it takes a few seconds to render, and there is a long delay between hovering over a data point and a tooltip. There are several such graphs on my page, and their combined impact makes the page almost unusable.

Are there any tricks / tips to improve chart performance with relatively large datasets? I attached the JSON diagram to the end of this post (with the data itself truncated).

By the way, before adding the turboThreshold: 0 property, the chart was not displayed at all, because the series has more than 1000 data points. According to the docs :

When a series contains a data array that is longer than this, only one-dimensional arrays of numbers or two-dimensional arrays with x and y values ​​are allowed. In addition, only the first point is checked, and the rest are considered the same. This saves costly data validation and indexing in long rows. Set it to 0 to disable. The default is 1000.

 $(function () { $('#container').highcharts({ chart: { type: 'line', marginRight: 10, zoomType: 'x' }, xAxis: { type: 'datetime' }, yAxis: { labels: { formatter: function () { return currencySymbol + this.axis.defaultLabelFormatter.call(this); } }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + currencySymbol + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { series: { states: { hover: { lineWidthPlus: 0 } }, lineWidth: 1, marker: { enabled: false, radius: 3 } } }, series: [{ data: [{"y":93,"x":1412722800000},{"y":54,"x":1412722860000}], turboThreshold: 0 }] }); }); 

Update

I updated the demo to include all the offers that I have received so far. Turning off the animation helped a bit, but the page is still very messy in Firefox (this is the main browser I am targeting). I started generosity in the hope of attracting additional offers.

Answer 1

Here you can find the FAQ by answering your question.

Extra Note: The big performance boost you get when you disable the tooltip.

Or just use Highstock, which implemented a dataGrouping diagram, for example with 52k points .

Answer 2

I found that animations can affect chart loading times for large datasets. Try disabling the animation:

 plotOptions: { series: { animation:false, states: { hover: { lineWidthPlus: 0 } } } }, 

Answer 3

I have a suggestion, but I don’t know if you like it. I need charts with several axes, and each axis has 1440 data points (they can only be 0 or 1 in my case), and they work fine. To do this, I had to change the data type of the x-axis and create the date "manually."

Create x-axis categories with date:

 xAxis: { categories: ['00:00', '00:01', '00:02', '00:03', ..., '23:59'] 

Then each datapoint is ordered in the same way as the category:

 series: [{ data: [1, 1, 1, 1, 1, 1, ..., null] 

I know this is dirty, but when you do this, you can reduce the data array only to the y axis value, and rendering takes less time. See JSFiddle.