the milliseconds data is not present in the histor

Question

The issue is that when there is a huge data in historyData of highcharts,then on zooming in the data is present only for every second and not for milliseconds. So on zooming in for a chart with huge data in its history data milliseconds data is missing.

To reproduce the issue please visit the below link then after sometime when there is a huge data present in the historydata change the interval in setinterval method from 20 to say some large number 20000,then zoomin historydata using rangeselector,the historydata has only seconds data plotted but not not the milliseconds data.

the issue is reproduced in the following link: https://jsfiddle.net/nh5ap21m/

I visited the api documentation of highcharts: https://api.highcharts.com/highcharts/plotOptions.series.pointInterval and tried making changes for pointInterval,pointIntervalUnit,connectNulls,gapSize gapUnit but still could not find the exact solution.

change interval here:

setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series1.addPoint([x, y], true, true);
                }, 20);
                var series2 = this.series[1];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 50);
                    series2.addPoint([x, y], true, true);
                }, 20);

Expected Result:The expected result is when zoomed in for the historyData of the chart,the milliseconds data should also be plotted.

// Create the chart
Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series1 = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series1.addPoint([x, y], true, true);
                }, 20);
                var series2 = this.series[1];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 50);
                    series2.addPoint([x, y], true, true);
                }, 20);
            }
        }
    },

    time: {
        useUTC: false
    },

    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },

    title: {
        text: 'Live random data'
    },

    exporting: {
        enabled: false
    },
legend: {
                enabled: true
            },
plotOptions: {
        series: {
            marker: {
                states: {
                    hover: {
                        enabled: true,
                        animation: {duration: 100},
                        enableMouseTracking: true,
                        stickyTracking: true
                    }
                }
            }
        }
    },

tooltip:{
								shared: true,
                split: false,
  							stickyTracking: true,
                enableMouseTracking: true,
                enabled: true,
                followPointer: true,
                followTouchMove: true,
						    formatter: function(){
                var tooltip = "";
                var phaseNameList = "";
                
                //tooltip += "<b>I-unit "+ "<br/>"+ "x: "+this.x +"</b>";
                tooltip += "<b>I-unit "+ "<br/>"+ "x: "+ new Date(this.x)+
                "</b>";
                tooltip +=  "<br/>"+ "y: "+this.y +"</b>";
                tooltip +=  "<br/>"+ this + "</b>";
                return tooltip;
               }
},

    series: [{
        name: 'Random data1',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    },
    {
    name: 'Random data2',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 50)
                ]);
            }
            return data;
        }())
    }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

Answer 1

The difference is that your initial data has a one-second interval:

for (i = -999; i <= 0; i += 1) {
    data.push([
        time + i * 1000,    // date every second
        Math.round(Math.random() * 100)
    ]);
}

The data that is dynamically added has a 20 milliseconds interval:

setInterval(function() {
    var x = (new Date()).getTime(), // date every 20 milliseconds
        y = Math.round(Math.random() * 50);
    series2.addPoint([x, y], true, true);
}, 20);