Estoy tratando de representar un fondo (degradado, pero el color simple tampoco funciona) para un gráfico de líneas usando chart.js 3.6.0 en una aplicación Vue 3. Los usuarios pueden alternar entre un gráfico de barras y un gráfico de líneas (para el mismo conjunto de datos). Curiosamente, funciona para el gráfico de barras:

Pero el gráfico de líneas no tiene gradiente:

Esta es la configuración de datos:

 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 } ] }

He intentado eliminar todo lo que podría causar un problema, pero incluso la configuración más básica con datos codificados no funciona.

Se accede al lienzo usando una referencia:

 <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>

¿Alguna idea sobre lo que podría estar causando esto? También intenté hacer frente a la configuración de los documentos de chartjs ( https://www.chartjs.org/docs/latest/charts/line.html ), pero tampoco tuve suerte.