[Feature Request] Expose _chart or provide update function

[akhchan99]

Would you like to work on this feature?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

Since chart options is not reactive, so I am suggesting that you either expose the _chart object or provide a update function that could force update the chart component.

I'm trying to get a bar chart that switch between stacked and unstacked, and I couldn't find a way to update the chart (unless I actually create two charts and switch between them)

Describe the solution you'd like

Expose _chart reference, or provide update function that trigger the _chart.update() function

Describe alternatives you've considered

No response

Documentation, Adoption, Migration Strategy

No response

[arkraft]

We have the same problem. The chart works great, except for the unreactive options. We use the annotation plugin and want to update annotations without destroying the chart and re-rendering it. It would be awesome if options would be reactive or the update function would be exposed.

[dargmuesli]

Alternatively, make options reactive too? Or is there anything that makes this idea bad?

[cheywood]

I also find myself needing access to the chart object, to call zoom (and likely other) plugin methods

[nanpx]

Not sure if this will help or not, I'm currently using vue-chartjs with Vue 2 and the composition api.

I can get a reference to the chart using a template ref:

<template>
  <bar ref="chart" />
</template>
<script>
  import { onMounted } from '@vue/composition-api';

  export default {
    setup(props, { refs }) {
      onMounted(() => {
        const currentChart = refs.chart.getCurrentChart();
        // chartjs API is available on currentChart - https://www.chartjs.org/docs/latest/developers/api.html
      });
    }
  }
</script>

For reactive options, I'm able to re-render the chart with a template ref and a watch function, calling renderChart on the ref (agreed, it would be nice if this was built-in functionality):

<template>
  <bar :chart-data="chartData" :chart-options="chartOptions" ref="chart" />
</template>
<script>
  import { 
    ref,
    watch,
  } from '@vue/composition-api';

  export default {
    setup(props, { refs }) {
      const chartData = ref({ ...yourData })
      const chartOptions = ref({ someOption: true });

      watch(chartOptions, () => {
        refs.chart.renderChart(chartData.value, chartOptions.value);
      });

      // some time later
      // chartOptions.value.someOption = false;

      return {
        chartData,
        chartOptions,
      }
    }
  }
</script>

[andrewalc]

trying to migrate to newest version, our charts depend on being able to update options. I used to do this by watching the options and updating manually using _chart.update(). If there's a work around please add it to the Migration to v4 page, i think exposing _chart would be best

[andrewalc]

the temporary Vue 3 workaround for my needs seems to be watching the options and set a flag on the component to trigger v-if re-rendering the chart itself. I'm using vue's nextTick function to trigger a re render with showChart.

<template>
    <Scatter v-if="showChart" :chart-data="chartData" :chart-options="options"></Scatter>
</template>

import { nextTick } from "vue";

...

data() {
    return {
        showChart: true
    }
},
watch: {
    async options() {
        this.showChart = false;
        await nextTick(() => {
            this.showChart = true;
        });
    },
},

id rather not have to do this though please, it defeats the purpose of the whole reactivity update 😕

[thabarbados]

Hi folks.
Sorry for the late answer. I was focused on fixing bugs in version 4.
I think that we will be able to implement your ideas shortly.

[thabarbados]

Hi guys. We made options reactive and exposed chart references in release 4.1.0.
You can check how it works now.

[akhchan99]

With 4.1.0, tested that the scales/stacked options can be toggled and reflected on the chart

[dargmuesli]

Thank you! 🥰