Prevent Highchart redraw twitch

2
votes

I've used AddPoint repeatedly on a scatter Highchart to show some data evolution, using

setinterval()

When the chart updates the axes' ranges as a consequence of the presence of new data points, the chart sometimes "twitches" as the data distribution is not longer well balanced around the origin:

http://jsfiddle.net/dhigger/qfxe87tr/

I would like to keep the redrawing of the axes to accommodate various data distributions, so one solution would be to keep the origin at the centre of the graph at all times, and scale positive and negative of an axis together, and always scale up. But I can't see how to achieve these.

Is there a way to avoid the twitch?

2
javascripthighcharts

2 Answers

1
votes

Those "twitches" are coming from Highcharts' native axis auto-scaling. You can fix the xAxis so your chart won't move anymore. For example, I managed to have your JSFiddle working by adding min: -15 for the xAxis: 

    xAxis: {
        plotLines: [{
            color: '#FA5858',
            width: 1,
            value: 0,
            zIndex: 2
        }],
        minRange: 30,
        min: -15,
        gridLineWidth: 1
    }

See the JSFiddle working with not "twitches" here.

1
votes

After setting the limits of the axes (per @Kabulan0lak's answer), I found that I could monotonically increase both positive and negative axis limits by keep track of the largest-magnitude data values and then re-set the max and min limits of the axes manually using setExtremes (manual).

e.g. chart.xAxis[0].setExtremes(min_x,max_x);

Updated jsfiddle: http://jsfiddle.net/dhigger/qfxe87tr/3/