Highcharts visualizes chart data incorrectly after zooming or using the navigator

Question

I'm using highstock with four yAxis. Every axis holds a series with more than 400 points. Initially the chart is correct but as soon as one does the slightest zoom or moves the navigator a little bit, the whole chart changes. Lines get connected where they shouldn't, the yAxis seems to be corrupted and data points are no longer respected.

Result: A chart showing totally wrong data.

This gets especially annoying when using an non ordinal xAxis, although it is not required for the bug to appear.

Expected view (without zooming or changed navigation):

After using the navigator points are connected, the yAxis changed unnecessary and the expected gaps are no longer visible:

The bug doesn't occurs with three axis or if all series are on one axis. It seems that it also depends on the height and width of the chart.

I have a JSFiddle for demonstration. Nothing special in this code. Mainly:

$(function () {
    $('#container').highcharts('StockChart', {
        chart: {
            zoomType: 'xy'
        },
        xAxis: {
            ordinal: false
        },
        yAxis: [{ 
            labels: {
                format: '{value}°C'
            },
            title: {
                text: 'Temperature1'
            }
        }, {
            title: {
                text: 'Temperature2'
            },
            labels: {
                 format: '{value}°C'
            }

        }, { 
            title: {
                text: 'Temperature3'
            },
            labels: {
               format: '{value}°C'
            }
        }, {
            title: {
                text: 'Temperature4'
            },
            labels: {
               format: '{value}°C'
            }
        }],
        series: [{
            name: 'Temp1',
            type: 'line',
            yAxis: 0,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp2',
            type: 'line',
            yAxis: 1,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp4',
            type: 'line',
            yAxis: 3,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }, {
            name: 'Temp3',
            type: 'line',
            yAxis: 2,
            data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
        }]
    });
});

jlbriggs jlbriggs · Accepted Answer · 2016-10-21T15:27:00

This appears to be a function of the dataGrouping options.

Disable dataGrouping and it seems to work fine.

Code:

plotOptions: {
  series: {
    dataGrouping: {
      enabled: false
    }
  }
}

Updated fiddle:

http://jsfiddle.net/jlbriggs/ydqdd624/4/

Reference:

Highcharts visualizes chart data incorrectly after zooming or using the navigator

1 Answers