If you don't already, you should try using vue-chartjs . It will handle all the wiring for vue dynamic data.


I'd suggest putting the chart's init function in the same method, or make a watcher method, like the one responsible for showing/hiding the element.


   <div v-if="visible">
     <div ref="chartContainer"></div>

   methodThatChangesVisibility () {
     this.visible = true

When saying that you could set up a watcher, it's pretty much the same thing but independent from the visible gets set to true.

  watch: {
    visible: function (visible) {
      if (visible) this.initChartMethod()


<div v-if="showChart"> <div id="chartWrapper"></div> </div>

When boolean showChart is changed, entire outer div content is re-render or destroy. If destroyed div is render again, you need to initChart also when the time of showChart become true.


I ran into this issue with vue-chartjs as well. What worked for me is to use v-show instead.

The block I had previously in v-else, I know put in a new v-if block

<div v-show="visualizationData">
    <myChart :chartData="visualizationData" :height="350" />

<div v-if="visualizationData === null">
    <div class="loadingIndicator">

Related Query

More Query from same tag