Highcharts Scatter Plot Performance

Question

I'm new to Highcharts and have been tinkering with it a bit on jsFiddle.

A fiddle independent example would look something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

$(function() {

var chart;
$(document).ready(function() {

chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
          type: 'scatter',
          zoomType: 'xy'
    },

    xAxis: {
        type: 'datetime'

    },
    series: [{
        color: 'rgba(223, 83, 83, .5)',
        data:
        [[Date.UTC(2012,10,15,12,25,47), 90.7000],
          // Many more data points here, see fiddle for complete list
         [Date.UTC(2013,2,7,11,37,18), 199.5000],
         [Date.UTC(2013,2,7,11,37,18), 199.5000]]
    }]

});
    });

});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>
</body>
</html>

Anyways, I have a series that consists of a large set (~16k) of (datetime,float) Cartesian points that I wish to visualize on a scatter plot. I got what I wanted, but it appears to make my browser really sluggish. Particularly if I re-size the window or hover over tooltips. Looking for any advice or tips to optimize the performance or point out (no pun intended) something else I should be doing instead for this kind of visualization.

Justin Bicknell Justin Bicknell · Accepted Answer · 2013-03-07T18:47:29

A couple of things you could do are to remove animation on the chart itself, and the tooltip. Also if you can get away with it, you could only render a tooltip for every 10th point.

http://jsfiddle.net/Jx5n2/3653/

chart: {
    renderTo: 'container',
    type: 'scatter',
    zoomType: 'xy',
    animation:false
},

tooltip:{
    animation:false,
    formatter:function(){
        if(this.x % 10 != 0) return false;
        return 'The value for <b>'+ this.x +
                '</b> is <b>'+ this.y +'</b>';
    }
},

Highcharts Scatter Plot Performance

1 Answers