How can I apply a linear gradient to fill in chart.js

I use chart.js and vue-chartjs

I need make fill (start) with gradient:

linear-gradient(180deg, #7F56D9 0%, rgba(127, 86, 217, 0) 95.55%);

like this image

My config

const chartData = {
labels: ['2022-01','2022-02','2022-03','2022-04','2022-05','2022-06','2022-07', '2022-08','2022-09', '2022-10', '2022-11', '2022-12'],
datasets: [
    {
        label: 'Dataset 1',
        data: [420,430,680,560,790,240,395,830,810, 430, 500, 700],
        borderColor: '#7F56D9',
        borderWidth: 2,
        backgroundColor: '#7F56D9',
        fill: 'start'
    }
]

}

Solution:

backgroundColor: (context) => {
            const ctx = context.chart.ctx;
            const gradient = ctx.createLinearGradient(0, 0, 0, 200);
            gradient.addColorStop(0, "rgba(127,86,217,0.1)");
            gradient.addColorStop(1, "rgba(127, 86, 217, 0)");
            return gradient;
        }