[Vue-ApexCharts] Strange behavior of animation in bar chart #75
Description
Hello!
i'm using:
- "vue": "^2.5.17",
- "vue-apexcharts": "^1.1.1",
And I have strange behavior of animation in bar chart on initial load if series: [ { data: [] } ] is empty.
At the moment when I initial chart object I do not have data for series and categories
options: {
chart: {
id: "isChart",
dropShadow: { enabled: true, top: 11, left: 0, blur: 3, opacity: 0.5 },
animations: { enabled: true, easing: "linear", speed: 1500,
animateGradually: { enabled: true, delay: 1500 },
dynamicAnimation: { enabled: true, speed: 1500 }
}
},
xaxis: { categories: [] },
},
series: [ { name: "s1", data: [] } ]
Then I make request to backend and fill series data and categories
axios.post("http://mydomain/loadData")
.then(response => {
response.data.forEach((element, index) => {
this.numX.push(index + 1);
this.numY.push(element.data);
});
this.series = [ { data: this.numY } ];
this.options = { xaxis: { categories: this.numX } };
})
.catch(error => {
console.log(error);
});
And on first time animations seems doesn't work and chart appears instantly. If i repeat this action(at this moment series data already filled with some data) animation will work correctly.
This behiavor only with bar chart.
i try for "area" and "line" charts and animation works correctly even on initial load when series data is emty