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?
from Apex Candle Charts are not updating
No comments:
Post a Comment