Don’t know why this is happening but the animation is not being applied to the graph but it is working fine for the details added.
Tried updating the echarts version to 5.5.1 but the issue still exists

"node_modules/echarts": {
      "version": "5.5.1",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz",
      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
      "dependencies": {
        "tslib": "2.3.0",
        "zrender": "5.6.0"
      }

angualr version : 16.0.2

chart.html

<div echarts #EChartsPercentage [options]="getOptionsForPercentages()" style="width :100px"></div>

chart.ts

getOptionsForPercentages(element) {
    const gaugeData = [
      {
        value: 20,
        name: 'Perfect',
        title: {
          offsetCenter: ['0%', '20%']
        },
        detail: {
          valueAnimation: true,
          offsetCenter: ['0%', '-10%']
        }
      },


    ];
    const option = {
      series: [
        {
          animation: true,
          animationDelay: 2000,
          animationDuration: 2000,
          animationThreshold: 500000,
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          clockwise: true,
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 40
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: gaugeData,
          title: {
            fontSize: 14
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'inherit',
            borderColor: 'inherit',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value}%'
          }
        }
      ]
    };
    return option;
  }

while trying to replicate the issue in online compilers everything is working fine
what might be the issue??