Broken chart when modifying the dataset in onMounted()

[mlapeyre3]

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

[mlapeyre3]

I tried with a setup similar to the one described by @Martijn097 in https://github.com/victorgarciaesgi/vue-chart-3/issues/83

<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 lineRef = ref(null);
const gradient = ref("red");

onMounted(() => {
  const canvas = lineRef.value.canvasRef;
  gradient.value = canvas.getContext("2d").createLinearGradient(0, 0, 0, 400);
  gradient.value.addColorStop(0, "rgba(255, 0,0, 0.9)");
  gradient.value.addColorStop(0.5, "rgba(255, 0, 0, 0.5)");
  gradient.value.addColorStop(1, "rgba(255, 0, 0, 0)");
  console.log(canvas);
  console.log(gradient);
});

const hours = ["00:00", "01:00", "03:00", "04:00"];

const testData = computed(() => ({
  labels: hours,
  showTooltips: false,
  datasets: [
    {
      label: "Dataset 1",
      data: [0, 20, 23, 40],
      borderColor: "#3AAFE3",
      backgroundColor: gradient.value,
      fill: true,
      hoverBackgroundColor: "#FFFFFF",
    },
  ],
}));
</script>

<template>
  <div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-4">
    <LineChart ref="lineRef" :chartData="testData" />
  </div>
</template>

But the result is that my CanvasGradient value is not taken into account 🧐 (at least it is not broken)