Chart jerks when screen size changes

[TangoPJ]

OS: macOS Monterey v12.6 Google Chrome version: 106.0.5249.119 (Official Build) (arm64)

Usage:

<Chart
    ref="realtimeChart"
    width="520"
    :options="getChartOptions('pie')"
    :series="[]"
/>

const getChartOptions = (type = 'pie') => ({
  series: [],
  chart: {
    type,
  },
  noData: {
    text: 'Please check the date range and whether you have submitted your worklogs to Jira.',
    align: 'left',
    verticalAlign: 'middle',
    offsetX: -10,
    offsetY: -200,
  },
  responsive: [
    {
      breakpoint: 650,
      options: {
        chart: {
          width: '100%',
        },
      },
    },
    {
      breakpoint: 450,
      options: {
        legend: { position: 'bottom' },
      },
    },
  ],
  tooltip: {
    theme: true,
    custom({ seriesIndex, w }: IChartOptionsCustom) {
      return w.globals.labels[seriesIndex]
    },
  },
})

The result and the problem you can see by watch this video: https://www.loom.com/share/205026ac67434ca2be05b2c7e49a7484

How can I solve this problem or what am I doing wrong?