apexcharts / vue-apexcharts

📊 Vue 2 component for ApexCharts
https://apexcharts.com
MIT License
1.33k stars 135 forks source link

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

Closed vystepanenko closed 4 years ago

vystepanenko commented 6 years ago

Hello! i'm using:

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 commented 6 years ago

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 commented 6 years ago

thanks in advance

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

vystepanenko commented 6 years ago

Same problem with donut chart

Ibonok commented 5 years ago

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 commented 5 years ago

+1 same here no animation on chart

lvidal1 commented 5 years ago

Same bug on:

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

paolog22 commented 5 years ago

Up for this

brunojahel commented 5 years ago

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 commented 5 years ago

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

amstrad commented 4 years ago

up

LACCamacho commented 4 years ago

Same bug in donut charts also

TheLinx79 commented 4 years ago

Still a bug in 2020.

junedchhipa commented 4 years ago

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 commented 4 years ago

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

"vue-apexcharts": "^1.5.1",
dusanradojcic commented 4 years ago

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

prabodhana commented 4 years ago

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

tiagolr commented 1 year ago

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

clowcher commented 8 months ago

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

Davidzrbb commented 4 months ago

@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',
        }