ng-apexcharts
ng-apexcharts copied to clipboard
Apex charts fail to update
I'm trying to create a real time candlestick chart using apexcharts. I can see the chart being initialized fine however it does not update.
I have chart options which looks like so
this.chartOptions = {
series: [
{
name: "My-series",
data: this.getSampleData()
}
],
chart: {
height: 350,
type: "candlestick"
},
title: {
text: "BTC SMA Chart"
},
xaxis: {
type: 'datetime'
}
};
I have a websocket which is attempting to update
data: { x, y }[]
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 }]
})
On update I can see my values from the console however nothing is updated in the chart.
Check this out: https://stackblitz.com/edit/ngapexcharts-demo?file=src%2Fapp%2Fapp.component.ts