highcharts range selector dosen't show plot

Question

this is my code for plotting a chart. it is related to stock data

      $('#container').highcharts('StockChart', {
                tooltip: {
                    useHTML: true,
                    formatter: function () {
                        var d = new Date(this.x);
                        var s = '';
                        s += '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b><br />';
                        $.each(this.points, function (i, point) {
                            console.log(point);
                            s += '<b><span style = "color:green;">' + point.series.name + ' : ' + point.point.close + '</b><br />';
                            s += '<span style ="color:' + point.series.color + ';">Open</span>: ' + point.point.open +
                                '<br/><span style ="color:' + point.series.color + ';">High</span>: ' + point.point.high +
                                '<br/><span style ="color:' + point.series.color + ';">Low</span>: ' + point.point.low +
                                '<br/><span style ="color:' + point.series.color + ';">Close</span>: ' + point.point.close + '<br/>';

                        });
                        return s;
                    }
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },
                chart: {
                    renderTo: 'container'
                },
                rangeSelector: {
                    selected: 1
                },
                series: [{
                    type: 'spline',
                    name: 'Data',
                    data: [
{'x': 1577145600000, 'y': 1603.0, 'high': 1659.0, 'low': 1603.0, 'close': 1631.0, 'open': 1603.0}, 
{'x': 1577059200000, 'y': 1635.0, 'high': 1667.0, 'low': 1552.0, 'close': 1627.0, 'open': 1635.0},
 {'x': 1576972800000, 'y': 1600.0, 'high': 1620.0, 'low': 1560.0, 'close': 1588.0, 'open': 1600.0},
 {'x': 1576886400000, 'y': 1581.0, 'high': 1634.0, 'low': 1565.0, 'close': 1590.0, 'open': 1581.0},
 {'x': 1576627200000, 'y': 1579.0, 'high': 1590.0, 'low': 1541.0, 'close': 1565.0, 'open': 1579.0},
 {'x': 1576540800000, 'y': 1617.0, 'high': 1634.0, 'low': 1565.0, 'close': 1593.0, 'open': 1617.0}, 
{'x': 1576454400000, 'y': 1621.0, 'high': 1646.0, 'low': 1600.0, 'close': 1617.0, 'open': 1621.0},
 {'x': 1576368000000, 'y': 1671.0, 'high': 1707.0, 'low': 1592.0, 'close': 1646.0, 'open': 1671.0}, 
{'x': 1576281600000, 'y': 1630.0, 'high': 1660.0, 'low': 1597.0, 'close': 1639.0, 'open': 1630.0},
 {'x': 1576022400000, 'y': 1602.0, 'high': 1675.0, 'low': 1584.0, 'close': 1633.0, 'open': 1602.0},
 {'x': 1575936000000, 'y': 1681.0, 'high': 1690.0, 'low': 1579.0, 'close': 1642.0, 'open': 1681.0},
 {'x': 1575849600000, 'y': 1610.0, 'high': 1670.0, 'low': 1565.0, 'close': 1634.0, 'open': 1610.0},
 {'x': 1575763200000, 'y': 1572.0, 'high': 1630.0, 'low': 1546.0, 'close': 1591.0, 'open': 1572.0},
 {'x': 1575676800000, 'y': 1553.0, 'high': 1641.0, 'low': 1548.0, 'close': 1584.0, 'open': 1553.0},
 {'x': 1575417600000, 'y': 1572.0, 'high': 1613.0, 'low': 1536.0, 'close': 1571.0, 'open': 1572.0},
 {'x': 1575331200000, 'y': 1520.0, 'high': 1598.0, 'low': 1480.0, 'close': 1577.0, 'open': 1520.0},
 {'x': 1575244800000, 'y': 1555.0, 'high': 1568.0, 'low': 1450.0, 'close': 1522.0, 'open': 1555.0},
 {'x': 1575158400000, 'y': 1471.0, 'high': 1513.0, 'low': 1444.0, 'close': 1505.0, 'open': 1471.0},
 {'x': 1575072000000, 'y': 1382.0, 'high': 1450.0, 'low': 1374.0, 'close': 1441.0, 'open': 1382.0},
 {'x': 1574812800000, 'y': 1390.0, 'high': 1392.0, 'low': 1366.0, 'close': 1381.0, 'open': 1390.0},
 {'x': 1574726400000, 'y': 1428.0, 'high': 1428.0, 'low': 1381.0, 'close': 1399.0, 'open': 1428.0},
 {'x': 1574640000000, 'y': 1353.0, 'high': 1412.0, 'low': 1353.0, 'close': 1404.0, 'open': 1353.0},
 {'x': 1574553600000, 'y': 1344.0, 'high': 1375.0, 'low': 1309.0, 'close': 1345.0, 'open': 1344.0},
 {'x': 1574467200000, 'y': 1340.0, 'high': 1360.0, 'low': 1301.0, 'close': 1326.0, 'open': 1340.0},
 {'x': 1574208000000, 'y': 1339.0, 'high': 1349.0, 'low': 1310.0, 'close': 1323.0, 'open': 1339.0},
 {'x': 1574121600000, 'y': 1319.0, 'high': 1350.0, 'low': 1312.0, 'close': 1329.0, 'open': 1319.0},
 {'x': 1574035200000, 'y': 1279.0, 'high': 1328.0, 'low': 1279.0, 'close': 1306.0, 'open': 1279.0},
 {'x': 1573948800000, 'y': 1288.0, 'high': 1310.0, 'low': 1288.0, 'close': 1291.0, 'open': 1288.0},
],
}]});

it shows and plot all data correctly (zoom All). but when i use range buttons (Zoom 1m) it dosen't show the plot. you can see my code in jsfiddle .

i searched google and i tried so much but nothing.

can anyone help? what is wrong? my x values are milliseconds.

thanks so much!

Answer 1

You have Highcharts error #15: https://www.highcharts.com/errors/15/ in a console. That means you have unsorted data, so you need to sort it:

chart.addSeries({
    type: 'line',
    name: 'test',
    data: [...].sort(function(a, b){
        return a.x - b.x;
    }),
});

---

Live demo: https://jsfiddle.net/BlackLabel/oLfa4xy3/