Strikethough labels when data is hidden

Question

I have the following code:

app.drawRSCWeightCharts = function() {
var ctx = document.getElementsByClassName('rscWeightChart');
var Charts = [];

if (ctx.length > 0) {
    for (i = 0; i < ctx.length; i++) {
        var id = ctx[i].getAttribute('id');
        var rscWeightChart = new Chart(ctx[i], {
            type: 'pie',
            fill: true,
            data: eval(id + 'Data'),
            options: {
                animation: {
                    animateScale: true
                },
                legend: {
                    position: 'bottom'
                }
            }
        });
        rscWeightChart.resize();
        Charts.push(rscWeightChart);
    }
    $('.toggleLegend').click(function (button) {
        if (button.target.id.substr(0, 6) !== 'toggle') {
            button.preventDefault();
            return false;
        } else {
            button.preventDefault();
            var button_id = button.target.id;
            button_id = button_id.replace(/\D/g, '');

            Charts.forEach(function (c) {
                if (('rscWeightChart' + button_id) === c.chart.canvas.id) {
                    c.data.datasets.forEach(function(ds) {
                        ds.hidden = !ds.hidden;
                    });
                    c.update();
                }
            });
        }
    });
}

This code hides all data in a pie chart when a button is clicked. Unfortunately no strikethrough is applied at the items in the legend. Shouldn't this happen by default when a dataset is hidden? I have tried to hide the legenItems by using the following code before the c.update() function:

c.legend.legendItems.forEach(function (li) {
                        li.hidden = !li.hidden;
                    });

This didn't work. Anyone knows why the legend items aren't striken through when the datasets are set to hidden = true? If i apply this code to a bar chart, the labels are striken through without any problems. It looks like the problem is in the pie chart or strikethrough is not supported for pie charts...? I made a example of the problem here. When the "toggle"-button is clicked, the chart data is hidden, but no labels are striken through.

Any suggestions?

Thanks in advance!

user_9695286 · Answer

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

You can check updaeted fiddle here

user_4891666 · Answer

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}`);
}

Strikethough labels when data is hidden

2 Answers