Improve performance of Highcharts line chart

Question

I'm using Highcharts to create a zoomable line chart that has 1440 data points, here's a JSFiddle demo thereof.

In Firefox, the performance of the chart is very sluggish, it takes several seconds to render, and there's a long delay between hovering over a datapoint and the tooltip appearing. On my page there are several such charts and their combined impact makes the page almost unusable.

Are there any tricks/tips for improving the performance of charts that have relatively large data sets? I've appended the chart's JSON to the end of this post (with the data itself truncated).

Incidentally, before I added the turboThreshold: 0 property the chart didn't render 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. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 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've updated the demo to include all suggestions I've received so far. Disabling animations helped a bit, but the page is still very sluggish in Firefox (which is the main browser I'm targeting). I've started a bounty in the hope of attracting further suggestions.

Answer 1

Here you can find FAQ answering your question.

Additional note: Big performance boost you will get while disabling tooltip.

Or just use Highstock, which has implemented dataGrouping, for example chart with 52k of points.