[Vue-ApexCharts] Strange behavior of animation in bar chart

[vystepanenko]

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

[junedchhipa]

You're right. I tested with bar chart and it seems animation is not running - the chart displays instantly.

Thanks for reporting, I will look into it

[vystepanenko]

thanks in advance

PS. I'm using core apexchart 1.4.12 at this moment

[vystepanenko]

Same problem with donut chart

[Ibonok]

Hi, is this Bug fixed? Same problem with all Charts if i use them in components.

"apexcharts": "^3.6.2", "vue-apexcharts": "^1.3.1",

Regards,

[paolog22]

+1 same here no animation on chart

[lvidal1]

Same bug on:

"apexcharts": "^3.6.8", "vue-apexcharts": "^1.3.4",

[paolog22]

Up for this

[brunojahel]

initialize your series array as: series: [{data: [0,0,0,0,0,0,0,0]}] (example for an 8 bar chart) and it'll work :)

[mihlek1]

Same bug here, using mixed column/line chart with no defined indexes

[amstrad]

up

[LACCamacho]

Same bug in donut charts also

[TheLinx79]

Still a bug in 2020.

[junedchhipa]

Sorry for the delay here. Fixed it. The animation will run fine in the next patch release of core apexcharts (apexcharts@3.15.6)

[prabodhana]

same bug in donut chart and column chart.. not working animation trigger the updateSeries() method i'm using:

"vue-apexcharts": "^1.5.1",

[dusanradojcic]

I still have the same bug with onstart animation of line chart. Has someone fixed tis?

[prabodhana]

I already updated to apexcharts": "^3.17.1 in nuxtjs but still not working

[tiagolr]

fixed this by manually calling this.$refs.chart.updateSeries([val], true) triggers the animation correctly

[clowcher]

same problem with donut chart on "vue3-apexcharts": "^1.5.2 and "apexcharts": "^3.46.0"

[Davidzrbb]

@brunojahel, @Sn0wFR thks man

apexcharts REACT but it can work with Vue i think Work for me with dynamicAnimation: initiate with value not empty : data[0,0,0,0 ...] (one 0 for each column)

chart: {
            animations: {
                dynamicAnimation: {
                    enabled: true,
                    speed: 850
                }
            },
            height: 350,
            type: 'bar',
        }