[Solved]-Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show-Chart.js

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.

Like:

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

   .....
   methodThatChangesVisibility () {
     this.visible = true
     this.initChartMethod()
   }

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>

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