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

by

2👍

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>

0👍

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()
    }
  }

0👍

<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.

Leave a comment