Ngx-Echarts Animation not working Initially

Question

I am using ngx echarts for my angular app and I am not able to get the animation to work during the initial load of the chart. I have attached a sample Stackblitz where you can observe that on initial load, the bars render faster whereas when toggling using the legend, the actual animation happens.

Can anyone help me out in the right direction saying what have I done wrong?

Html:

<div echarts [options]="options"></div>

Ts options object

{
  xAxis: {
    data: xAxisData,
  },
  legend: {},
  yAxis: {},
  series: [
    {
      name: 'bar',
      type: 'bar',
      barCategoryGap: '0%',
      data: data1,
      animationDuration: 5000,
    },
    {
      name: 'bar1',
      type: 'bar',
      barCategoryGap: '0%',
      data: data2,
      animationDuration: 3000,
    },
  ],
}

Answer 1

I faced the same bug a while ago, It only occurs when you have [autoResize] = true (it is by default true). So you have to explicitly disable it and handle resizing some other way.