Description
Describe the bug
Hello everyone, I am onboarding on a new Vue3 project and I will use Chart.js (and its vue-chart-3 equivalent). I wanted to created a simple area chart with a gradient filling. Following both Chart.js and vue-chart-3 documentation, I understood that I had to create a CanvasGradient object and assign it to the canvasRef. However, when doing so the chart becomes broken after the initialization.
I thought it came from my implementation (maybe there is an error, I am not familiar with it) so I decided to do something very simple, and the issue still happens.
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { LineChart } from "vue-chart-3";
import { Chart, registerables } from "chart.js";
Chart.register(...registerables);
const linechartRef = ref();
var gradientFill = ref('green');
onMounted(() => {
gradientFill.value = 'red';
});
var testData = computed(() => ({
datasets: [
{
label: "Savings",
data: [
{ x: "2021-12", y: 20600 },
{ x: "2022-01", y: 21200 },
{ x: "2022-02", y: 21300 },
{ x: "2022-03", y: 18200 },
{ x: "2022-04", y: 18300 },
],
backgroundColor: gradientFill.value,
},
],
}));
</script>
<template>
<div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-4">
<LineChart ref="linechartRef" :chartData="testData" />
</div>
</template>
I don't think my setup is wrong, but maybe I missed something. Thanks!
To Reproduce
Here is a Codesandbox with vue3 + composition API
https://codesandbox.io/s/zen-elion-g6mq6k?file=/src/views/HomeView.vue
Version of vue-chart-3
ex: v3.1.18
Version of Vue
- Vue 3