Show live data on Highcharts without default series

Question

I found this code from Highchart website: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/

I want to show data on a chart with empty default series and put dateTime as xAxis. I don't want to use jQuery and do not want to add point on load event in chart. I just want to add point when page is loaded completely. I used this

const chart = new Highcharts.chart('container', {
  ...
  ...
  ...
}

document.addEventListener('DOMContentLoaded', function() {
  var i = 0;
  console.log(chart)
  setInterval(function() {
    console.log(values[i])
    chart.series[0].addPoint(values[i], true, true);
    i++;
  }, 1000);
})

I used the chart structure like the link above. values[i] is a point which is [dateTime, Number] that I get it from my an API. I found some solutions that uses category for xAxis but I need to use dateTime and show the dateTime there not category.

ppotaczek ppotaczek · Accepted Answer · 2018-07-20T13:00:02

You can not add a point with shift to a series without data. Add first point without shift or do not use shift: http://jsfiddle.net/BlackLabel/0h9jz3t1/

const chart = new Highcharts.chart('container', {
  series: [{}]
});
const values = [[100, 20], [200, 20], [300, 20], [400, 20], [500, 20]];

document.addEventListener('DOMContentLoaded', function() {
  var i = 0;

  chart.series[0].addPoint(values[i], true, false);
  i++;

  setInterval(function() {
    chart.series[0].addPoint(values[i], true, true);
    i++;
  }, 1000);
});

Live demo: http://jsfiddle.net/BlackLabel/oqp30tna/

API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Show live data on Highcharts without default series

1 Answers