Highcharts scatter plot with lots of data points running really slow

Question

I've seen a few suggestions here, but nothing seems to apply to my situation. I've also seen some unresolved similar issues. I have scatter plot with a lot of data (about 40k) points. It's really slow. The link below (genetic data - called a Manhattan plot) will eventually load, but it's just slow. I need to find a way to optimize performance.

http://ricediversity.org/test/highcharts/examples/line-ajax/index-b.htm

Also, I'm trying to add additional info (data fields) to my tooltip from my data file, but I can't get that working either. Any suggestions?

Answer 1

You can try to disable animations / shadows.

http://api.highcharts.com/highcharts#chart.animation http://api.highcharts.com/highcharts#plotOptions.series.animation http://api.highcharts.com/highcharts#tooltip.animation http://api.highcharts.com/highcharts#plotOptions.series.shadow

Answer 2

As far as tooltips, check out the highcharts data api, specifically number 2 in the list. If that doesn't cut it for you, you can pass in an array of objects where you specify the data you want to get. Then, in the formatter, it is easy to reference. Here's a JSfiddle showing how to reference the names once they're in your data array.

The formatter is

formatter: function () {
    var s = "";
    $.each(this.points, function (i, point) {
        s += point.point.nameList[0];
    });
    return s;
}

and the data sets look like:

data = [ ..., 
         {x: xval, y: yval, nameList: myListOfNames},
         ...]

where xval and yval are the x and y values of the data points and myListOfNames is an array of strings.