Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Broken chart when modifying the dataset in onMounted() #120

Open
mlapeyre3 opened this issue Apr 15, 2022 · 1 comment · May be fixed by #135
Open

Broken chart when modifying the dataset in onMounted() #120

mlapeyre3 opened this issue Apr 15, 2022 · 1 comment · May be fixed by #135

Comments

@mlapeyre3
Copy link

mlapeyre3 commented Apr 15, 2022 •
edited

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

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
Copy link
Author

I tried with a setup similar to the one described by @Martijn097 in #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)
image

maennchen added a commit to jshmrtn/vue-chart-3 that referenced this issue Sep 23, 2022
@maennchen
Keep Instances intact when cloning datasets on update
367380e 
Fixes an issue where a CanvasGradient was falsely cloned as an empty object and thus breaking the background of the chart

This should probably fix victorgarciaesgi#120 as well.
@maennchen maennchen linked a pull request Sep 23, 2022 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Keep Instances intact when cloning datasets on update jshmrtn/vue-chart-3
1 participant
@mlapeyre3