How to properly use appendData in ng-apexcharts (angular)? - html

Question

Project is Angular/FastAPI app. I'm looking for way to update data in my single serie. Series data should be updated when new data arrive from websocket and almost everything is working. I'm checking if data is arriving and it's done properly. One single problem is fact that I can't add any data to my series and have tried many ways to do it.
I'm trying this way. This is my constructor in component. It's worth to mention that I'm checking if chart is already rendered before appending data to my series and I checked if arriving data is valid - it is every time. Chart is also working properly if I specify data for my serie statically in chartOptions. Console.log(this.chart.series) every time shows that series length isn't changing, it's always 1:
constructor(private binance: BinanceService) {
this.chartOptions = {
series: [
{
name: "candle",
data: [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
}
]
}
],
chart: {
type: "candlestick",
height: '800',
width: '100%',
redrawOnParentResize: true,
},
title: {
text: "CandleStick Chart",
align: "left"
},
xaxis: {
type: "datetime"
},
yaxis: {
tooltip: {
enabled: true
}
},
tooltip: {
enabled: true,
custom: function({ seriesIndex, dataPointIndex, w }) {
const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]
return (
'<div class="apexcharts-tooltip-candlestick">' +
'<div>Open: <span class="value">' +
o +
'</span></div>' +
'<div>High: <span class="value">' +
h +
'</span></div>' +
'<div>Low: <span class="value">' +
l +
'</span></div>' +
'<div>Close: <span class="value">' +
c +
'</span></div>' +
'</div>'
)
},
theme: 'dark'
}
};
this.socketSubscription = this.binance.onNewCandle().subscribe(params => {
if(this.rendered) {
console.log(params)
this.chart.appendData([
{
data:
{
x: new Date(params.date),
y: [params.open, params.high, params.low, params.close]
}
}
]);
console.log(this.chart.series)
}
}
);
}
This is mainchart.component.html file:
<apx-chart #chart [series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[title]="chartOptions.title"
[tooltip]="chartOptions.tooltip">
</apx-chart>
I have tried many ways to append this data (and rerender or update chart) and I'm out of ideas. If someone knows how to do this properly I have another couple of questions.
I want append existing data if it's x value isn't already in series - if it already is, it should be updated with new value, but I understand it well it will works like this with appendData(). Am I right?
In case I have more series and want to append more of them it works like this, right?:
this.chart.appendData([
{ |
data: |
{ |
x: new Date(params.date), | This object updating
y: [params.open, params.high, params.low, params.close] | series[0]
} |
},
|
{ |
data: |
{ |
x: new Date(params.date), | This object updating
y: [params.open, params.high, params.low, params.close] | series[1]
} |
} |
]);