[Chartjs]-Strikethough labels when data is hidden

by

1👍

✅

Use rscWeightChart.getDatasetMeta(0).data instead of rscWeightChart.data.datasets.

You can check updaeted fiddle here

1👍

Currently, your code is hiding the entire dataset not each label within the dataset.

I’ve made a simple example below and have commented the code, I hope it makes sense.

If you look at the documentation you will see that getdatasetmeta() is needed to get the metadata from inside the object.

Looks for the dataset that matches the current index and returns that metadata. This returned data has all of the metadata that is used to construct the chart.

let rscWeightChart = new Chart($('.rscWeightChart'), {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 5, 2, 3],
      hidden: false
    }]
  }
});

for (let data of rscWeightChart.data.datasets) {
  /* setting this to false will hide the entire chart, 
  but each label will not know that it is hidden */
  console.log(`Entire chart: ${data.hidden}`);
}

for (let data of rscWeightChart.getDatasetMeta(0).data) {
  /* setting this to false will hide each label,
  this will lead to each label gaining a strikethrough */
  console.log(`Each label: ${data.hidden}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<canvas class="rscWeightChart"></canvas>

Leave a comment