Not so smooth gredient

[donmb1]

Hi folks,
I have an issue with vue apexcharts. When plotting a gradient on my website, it looks like in the screenshot.
This is my configuration

const chartOptions = computed(() => { 
  return {
    chart: {
      type: 'area',
      toolbar: {
        show: false
      },
      zoom: {
        enabled: true
      }
    },
    colors: ['#516ED7'],
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 5
    },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.9,
        opacityTo: 0.6
      }
    },
    xaxis: {
      categories: xAxisData.value
    },
    yaxis: {
      tickAmount: 3,
      forceNiceScale: true,
      min: 0
    }
  }
})

How could this possibly happen?