Chartjs-How can I show "No Data" message in Pie Chart when there is no data using VueJS?

by

1👍

Presumably this.myChart2 is declared elsewhere and will be used to access the chart object, and I’m guessing that this property is never == 0 so isn’t a suitable test condition.

The property you are looking for is the length of the data array in the dataset this.myChart2.data.dataset.data.length, unfortunately this property does exist until the data is received from the server so referencing it directly will result in ‘cannot read property length of undefined’ errors

My suggestion would be to initalize another property in your vue component to store your data length, say this.myChart2Length = 0; and update this when you get your axios response this.myChart2Length = vm.best_beneficiaries.length || 0;

Then in your template you can reference the new property in your v-if condition

<div class="wrapper mt-5">
  <canvas ref="myChart2" id="myChart2" v-if="myChart2Length > 0" width="600" height="250" class="mb-5"></canvas>
  <span v-else >No data</span>
</div>

Leave a comment