折线图的Chartjs backgroundColor未显示在Vue应用程序中

我正试图在Vue 3应用程序中使用chart.js 3.6.0为折线图渲染背景(渐变,但简单的颜色也不起作用)。用户可以在条形图和折线图之间切换(对于同一数据集)。有趣的是,它适用于条形图:

但折线图没有梯度:

这是数据配置:

data: {
    labels: props.labels as string[],
    datasets: [
        {
            data: props.data as number[],
            backgroundColor: getBackgroundColor(), // returns the gradient
            borderColor: getBorderColor(), // returns a color
            fill: true // tried all possible values for this
        }
    ]
}

我已经尝试删除所有可能导致问题的内容,但即使是最基本的硬编码数据配置也不起作用。

画布使用引用进行访问:

<template>
    <canvas class="statistics-canvas" ref="canvas" width="100%" height="100%"></canvas>
</template>

<script lang="ts">
    // ...
    setup() {
        const canvas = ref(document.createElement("canvas"));
        let chart: Chart;

        onMounted(() => createChart());

        function createChart() {
            chart = new Chart(canvas.value, {/*...*/});
        }

        return {
            canvas
        };
    }
</script>

你知道是什么原因造成的吗?我还尝试过处理chartjs文档中的配置( https://www.chartjs.org/docs/latest/charts/line.html ),但也没有运气。