ng-apexcharts
ng-apexcharts copied to clipboard
apexcharts
Updating series/labels causing the chart to disappear after a while
I have used sample at https://codesandbox.io/s/apx-donut-simple-8fnji?from-embed but since it is quiet unrealistic (no one provides the chart data inside the constructor) I have made it a little bit more real-world by removing the constructor and placing the initial data in ngOnInit. Then I change the series and labels in a setTimeout callback (simulating the data is coming from a server). What happens is that the chart starts drawing (with animation) and before reaching let's say 10% of the animation it disappears. Full code at https://codesandbox.io/s/apx-donut-simple-tj28q
In general this is how I change the original sample class:
constructor() {}
ngOnInit(): void {
this.chartOptions = {
series: [],
chart: {
type: "donut"
},
labels: [],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: "bottom"
}
}
}
]
};
setTimeout(() => {
this.chartOptions.series = [44, 55, 13, 43, 22];
this.chartOptions.labels = ["1", "2", "3", "4", "5"];
}, 100);
}
Notice the constructor is now empty, the initial values of series and labels are empty arrays and their values are changed 100ms after ngOnInit executes.
It is important that initial values (inside ngOnInit) of the series and labels to be empty arrays. If they contain something, the problem does not occur.
I am also facing the same issue. But even worse, in my case the latest version of ng-apexcharts disappears even when I provide the data series in the constructor.
