Plot float up & down beyond y-axis in StockChart while dragging navigator

Question

Here is my js code:

Highcharts.stockChart('utilizations', {
                chart: {
                        zoomType: 'x'
                },
                title: {
                    text: 'KPI'
                },
                subtitle: {
                    text: 'CCE & PRB Utilization (%)'
                },
                rangeSelector: {
                    buttons: [{
                        type: 'day',
                        count: 1,
                        text: '1d'
                    }, {
                        type: 'day',
                        count: 3,
                        text: '3d'
                    }, {
                        type: 'day',
                        count: 7,
                        text: '1w'
                    }, {
                        type: 'day',
                        count: 14,
                        text: '2w'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    selected: 1
                },
                yAxis: {
                    labels: {
                        formatter: function () {return this.value + '%';}
                    },
                    max: 100,
                    min: 0,
                    tickInterval: 20,
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    },{
                        value: 70,
                        width: 1,
                        color: 'red'
                    }]
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    series: {
                        compare: 'value',
                        showInNavigator: true
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                xAxis: {
                    type: 'datetime'    
                },
                series: [{
                    name: 'CCE Util',
                    type: 'spline',
                    yAxis: 0,
                    data: (function(){
                        var data = [];
                        for (var i = 0; i < result.length; i++) {
                            var time = result[i]["time"];
                            var kpi = result[i]["cce"];
                            data.push([time, kpi]);
                        }
                        return data;
                    })(),
                    tooltip: {
                        valueSuffix: '%',
                        valueDecimals: 2,
                        split: true
                    }
                },{
                    name: 'PRB Util',
                    type: 'spline',
                    yAxis: 0,
                    data: (function(){
                        var data = [];
                        for (var i = 0; i < result.length; i++) {
                            var time = result[i]["time"];
                            var kpi = result[i]["prb"];
                            data.push([time, kpi]);
                        }
                        return data;
                    })(),
                    tooltip: {
                        valueSuffix: '%',
                        valueDecimals: 2,
                        split: true
                    }

And my plot:

While dragging the navigator bar, sometimes the plot goes to the right position and sometimes it looks like the capture above. According to my experience, the plot position is related to the left end (let's note this as A) position of the navigator selector. When A is on the lowest part of the whole plot in navigator, the shown plot positioned well; and when A goes like the capture above, the plot shown sunk.

Please refer to a short demo with 100 data here: https://jsfiddle.net/ghqyvo0x/

How can I make my plot stable?

I cannot reproduce your problem basing on the attached code, because it refers to "result" variable. Could you provide me with some minimal example of result variable or entire minimal working copy of your project? — daniel_s, Dec 07 '17 at 16:53
@daniel_s I have captured the first 100 data into jsfiddle. Though this example is far less from my actual situation, you can still observe my problem from it. Please refer to https://jsfiddle.net/ghqyvo0x/ — Taurus Dang, Dec 08 '17 at 02:02

daniel_s · Accepted Answer · 2017-12-08T12:40:18.293

Your problem is caused by series.compare: property, which you set in plotOptions configuration object. If you delete this line of code, everything should work as you need. We could read in Highstock API:

Compare the values of the series against the first non-null, non- zero value in the visible range.

plotOptions: {
  series: {
    //compare: 'percent',
    showInNavigator: true    
  }
}

JSFiddle example

API Reference

Plot float up & down beyond y-axis in StockChart while dragging navigator

1 Answers1