Apex Candle Charts are not updating

Question

I'm using apex charts in angular to create a candle stick chart.

my html looks like so:

<apx-chart
  [series]="chartOptions.series"
  [chart]="chartOptions.chart"
  [xaxis]="chartOptions.xaxis"
  [title]="chartOptions.title"
></apx-chart>

I initialize the chart with sample data so I can see it working. When I try to dynamically update the chart from my websocket, nothing happens (the sample data persists) component.ts:

this.chartOptions = {
  series: [{
      name: "My-series",
      data: this.getSampleData()
  }],
  chart: {
    height: 350,
    type: "candlestick"
  },
  title: { text: "BTC SMA Chart"},
  xaxis: { type: 'datetime' }
};

this.connection.on("candlesReceived", (candleJson) => {
  var candle = JSON.parse(candleJson);
  console.log("open: " + candle.open + " high: "
    + candle.high + " low:" + candle.low + " close:" + candle.close);

    this.data.push({ x:Date.parse(candle.timeStamp), y: [candle.open, candle.high, candle.low, candle.close]})
    this.chartOptions.series = [{ data: this.data }]
})

According to the Documentation all you have to do to update is to reassign the series. However that's not working.

How can I dynamically update my chart so it operates in realtime?

Answer 1

It's hard to say why it doesn't work for you with the limited code you have provided but I created a fork of the linked sample you gave where I append to the chart series by clicking a button.

code:

let data = this.chartOptions.series[0].data;
data.push({
  x: new Date(1538894800000),
  y: [6669.81, 6660.5, 6663.04, 6663.33]
});
this.chartOptions.series = [
  {
    data: data
  }
];

Additionally Date.parse(candle.timeStamp) return an int value, instead I think you want to use a date, so instead you should do the following:

new Date(Date.parse(candle.timeStamp));

If you are doing this on a websocket event just make sure you are accessing the correct instance of chartOptions and it should work fine.