Cannot set background gradient

[thaycacac]

Describe the bug

I want to set background gradient but not work

This is expect:

And this my code

import { defineComponent, h, PropType } from 'vue'

import { LineChart } from 'vue-chart-3'
import {
  Filler,
  Chart,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
  LineController,
} from 'chart.js'

Chart.register(
  Filler,
  LineController,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
)

export default defineComponent({
  name: 'LineChart',
  components: {
    LineChart,
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart',
    },
    width: {
      type: Number,
      default: 479,
    },
    height: {
      type: Number,
      default: 115,
    },
    cssClasses: {
      default: '',
      type: String,
    },
    styles: {
      type: Object as PropType<Partial<CSSStyleDeclaration>>,
      default: () => {},
    },
  },

  setup(props) {
    const chartData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          fill: true,
          label: 'X8',
          pointRadius: 0,
          borderColor: '#4F0CBD',
          backgroundColor: '#4f0cbd45',
          data: [40, 39, 10, 40, 39, 80, 40],
        },
      ],
    }

    const onChartRender = (chart: Chart) => {
      const ctx = chart.$context.chart.ctx
      const canvas = chart.$context.chart.canvas
      const chartArea = chart.$context.chart.chartArea
      var gradientBack = canvas.getContext('2d').createLinearGradient(0, 0, 0, 250)
      gradientBack.addColorStop(0, 'rgba(60, 174, 163, 0.7)')
      gradientBack.addColorStop(0.5, 'rgba(255, 255, 255, 0)')
      gradientBack.addColorStop(1, 'rgba(32, 99, 155, 0.7)')

      console.log(ctx, canvas, chartArea)

      ctx.fillStyle = gradientBack
      ctx.fillRect(
        chartArea.left,
        chartArea.bottom,
        chartArea.right - chartArea.left,
        chartArea.top - chartArea.bottom,
      )
    }

    const options = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          ticks: {
            display: false,
          },
        },
        y: {
          ticks: {
            display: false,
          },
        },
      },
      hiddenLabel: true,
      plugins: {
        legend: {
          labels: {
            filter: () => {
              return false
            },
          },
        },
      },
    }

    return () =>
      h(LineChart, {
        chartData,
        options,
        onChartRender,
        // onChartUpdate,
        chartId: props.chartId,
        width: props.width,
        height: props.height,
        cssClasses: props.cssClasses,
        styles: props.styles,
      })
  },
})

To Reproduce

Put a reproduction link here based on this templates

• Template for Vue 3
• Template for Vue 2
• Template for Nuxt 2

Version of vue-chart-3

ex: v3.0.2

Version of Vue

• [ ] Vue 3
• [ ] Vue 2
• [ ] Nuxt 2
• [ ] Nuxt 3

[h3clikejava]

I have same issue