CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjs
Olga B
Olga B

Reputation: 513

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

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>

Upvotes: 1

Views: 2380

Answers (1)

Bert
Bert

Reputation: 82439

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.

Upvotes: 1

Related Questions