Accessing chartInstance without refs about vue-chart-3 HOT 5 CLOSED

Nevermind, I forgot about adding { } to return

from vue-chart-3.

Hi no you can't access chartInstance like that because it's not the same behaviour as vue-chartjs. They need you to declare a new component for each Chart whereas here you juste have to import the pre-made component.

So like this:

<template>
  <DoughnutChart ref="doughtnutRef" />
</template>

<script>
import { DoughnutChart } from 'vue-chart-3';

export default defineComponent({
  name: 'Home',
  components: { DoughnutChart },
  setup() {
    const doughtnutRef = ref();
    // ....
    onMounted(() => {
      doughtnutRef.value.chartInstance.toBase64Image();
    });

    return { doughtnutRef };
  },
});
</script>

from vue-chart-3.

Hi no you can't access chartInstance like that because it's not the same behaviour as vue-chartjs. They need you to declare a new component for each Chart whereas here you juste have to import the pre-made component.

So like this:

<template>
  <DoughnutChart ref="doughtnutRef" />
</template>

<script>
import { DoughnutChart } from 'vue-chart-3';

export default defineComponent({
  name: 'Home',
  components: { DoughnutChart },
  setup() {
    const doughtnutRef = ref();
    // ....
    onMounted(() => {
      doughtnutRef.value.chartInstance.toBase64Image();
    });

    return { doughtnutRef };
  },
});
</script>

On 0.3.2 version refs value was undefined.
After upgrading to the newest version (0.3.7), it seems that this version is not working at all?
I mean, whole website is unresponsive.

from vue-chart-3.

@Krulaks upgraded to the newest version 0.4.7, there were breaking changes and fixes to get it working on both Vue 2 & 3

from vue-chart-3.

On 0.4.7,
using this code:

<template>
  <LineChart ref="lineRef" :chartData="chartData" :options="computeOptions" :styles="chartStyle" />
</template>

<script>
import { defineComponent, onMounted, ref } from "@vue/composition-api";
import { LineChart } from "vue-chart-3";
import "chartjs-adapter-moment";

export default defineComponent({
  components: { LineChart },
  props: ["chartdata", "options", "parsestyles"],
  setup() {
    const lineRef = ref();

    onMounted(() => {
      console.log(lineRef.value);
    })
    return lineRef;
  },

It returns:

from vue-chart-3.