Vue-chartjs: Re-render a chart even if data hasn't changed

Question

I have a component with two charts which I show on the button click. I use the same component of a chart but I give different chartData to it through two different getters. The chart looks like this:

<script>
import { Bar, mixins } from 'vue-chartjs';

export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted() {
   this.renderChart(this.chartData, this.options);
  },
};
</script>

I know that reactiveProp renders a new chart if data has changed (and initialises nice animation). But currently two getters give the same data for this.chartData so when I try to switch the chart, it stays the same. Is there any way to update or destroy data so the chart will be re-rendered, even if it gets the same data from another getter? For some reasons, methods like update(), destroy(), clear() didn't work out but maybe I used them in the wrong place.

Here's my page with the chart:

<template>
 <div>
  <button @click="showAll = false">
          Show old users
  </button>
  <button @click="showAll = true">
          Show all users
  </button>
  <chart v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
  <chart v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />
 <div>
<template>

Thanks. I used this and now my chart is re-rendered every time I click the button but the console says: Avoid using non-primitive value as key, use string/number value instead. I added key like this: <chart v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" :key="setDataOld" /> — Olga B
– Olga B, Commented May 22, 2018 at 15:21
I think you want :key="'setDataOld'". If you want to use an explicit string you need to use single quotes inside double quotes (or vice versa). Basically, you don't want your key to be an object, you want it to be some primitive value, and it doesn't have to be any specific value, it just needs to be different for chart one and chart two. Really, you could just use :key="1" and :key="2" in your case. — Bert
– Bert, Commented May 22, 2018 at 15:22

tony19 · Accepted Answer · 2022-07-16 00:19:44Z

1

This should work. Note the keys.

<chart :key="1" v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
<chart :key="2" v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />

Essentially you want to be able to give Vue a hint about what differentiates the two charts so it knows explicitly which one to render instead of making use of its default component re-use strategy.

edited Jul 16, 2022 at 0:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 22, 2018 at 15:27

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olga B Over a year ago

Thank you so much! This solution is so simple, yet I would never think to use key apart from the case when you need to male a list with v-for. Now everything works fine.

Collectives™ on Stack Overflow

Vue-chartjs: Re-render a chart even if data hasn't changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related