Angular + ApexChart labels are not updated on .updateSeries() method call

I'm using apexChart + angular and want to update data(series) in chart dynamically using updateSeries() method. Data is being updated correctly, but X and Y labels are not. Here you can find the code snippet:

<div
<apx-chart #chart
[dataLabels]="chartOptions.dataLabels"
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[title]="chartOptions.title"
[plotOptions]="chartOptions.plotOptions"
[legend]="chartOptions.legend"
[tooltip]="chartOptions.tooltip"
[autoUpdateSeries]="chartOptions.autoUpdateSeries"
></apx-chart>
</div>

@ViewChild('chart') chart: ChartComponent;
ngOnInit(): void {
this.chartOptions = {
dataLabels: {enabled: false},
autoUpdateSeries: true,
tooltip: {
x: {
format: 'dd MMM, yyyy HH:mm'
}
},
series: [],
chart: {
type: 'bar',
height: 500,
width: 1500,
stacked: true,
toolbar: {
show: false,
},
},
title: {
text: 'Title',
align: 'center',
},
xaxis: {
type: 'datetime',
},
yaxis: {
title: {
text: 'Traffic (Mbps)',
},
labels: {
formatter: (value) => `${value} (M) `,
},
},
plotOptions: {
bar: {
horizontal: false,
barHeight: '85%',
columnWidth: '100%',
borderRadius: 5,
borderRadiusWhenStacked: 'all',
distributed: false,
},
},
legend: {
show: true, // Show or hide the legend
position: 'bottom', // Position: 'top', 'right', 'bottom', 'left'
horizontalAlign: 'left', // Alignment: 'start', 'center', 'end'
floating: false, // If true, the legend floats over the chart
fontSize: '14px', // Font size
fontWeight: 400, // Font weight
labels: {
colors: '#333', // Color of the labels
useSeriesColors: false, // Use series colors for legend labels
},
itemMargin: {
horizontal: 10, // Space between legend items
vertical: 5,
},

},
};
}

public onEvent(event: any) {
this.service.getData(event).subscribe(data => {
this.chart.updateOptions({
series: [
{name: data.meta.legend.at(0), data: data.txBytes},
{name: data.meta.legend.at(1), data: data.rxBytes},
]});
});
}


My wild guess is that I'm creating empty series and trying to update it afterwards. I've tried updateOptions() instead of updateSeries() as well, but without any luck. Any help would be highly appreciated!

Continue reading...