ChartJS doughnut data toggle on custom button click

Question

is there a way to make some data in the doughnut ChartJS chart toggle? I have created some custom HTML/CSS and random data for the chart and I have tried to find a solution for the last 6 hours and there were only some tutorials on youtube which were not helping that much.

This is the HTML part:

Here is only the relevant part of the chart script:

const myDashDoughnutChart = new Chart(dashDoughnutChart, {
        type: 'doughnut',
        data: {
            labels: ['Cat1', 'Cat2', 'Cat3', 'Cat4'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5],
                backgroundColor: [
                    'rgb(143,219,226)',
                    'rgb(255,206,148)',
                    'rgb(158,239,181)',
                    'rgb(251,172,172)'
                ],
                borderColor: [
                    'rgb(143,219,226)',
                    'rgb(255,206,148)',
                    'rgb(158,239,181)',
                    'rgb(251,172,172)'
                ],
                borderWidth: 1,
            }]
        },

And this is the script I have found on the youtube but it does not work for me:

        function toggleData(value) {
        let showValue = myDashDoughnutChart.isDatasetVisible(value);
        
        if(showValue === true) {
            myDashDoughnutChart.hide(value)
        }

        if(showValue === false) {
            myDashDoughnutChart.show(value)
        }

Every button should hide one data from myDashDoughnutChart.data.datasets[0].data[] ...

user_2358409 · Answer

The toggle function could be written as follows:

function toggleData(button, category) {
  chart.toggleDataVisibility(category);
  chart.update();
  if (chart.getDataVisibility(category)) {
    button.classList.remove('hidden');
  } else {
    button.classList.add('hidden');
  }
}

Further information about the Chart.js API can be found here.

Please take a look at your amended code and see how it works:

const chart = new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['Cat1', 'Cat2', 'Cat3', 'Cat4'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5],
      backgroundColor: [
        'rgb(143,219,226)',
        'rgb(255,206,148)',
        'rgb(158,239,181)',
        'rgb(251,172,172)'
      ],
      borderColor: [
        'rgb(143,219,226)',
        'rgb(255,206,148)',
        'rgb(158,239,181)',
        'rgb(251,172,172)'
      ],
      borderWidth: 1,
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

function toggleData(button, category) {
  chart.toggleDataVisibility(category);
  chart.update();
  if (chart.getDataVisibility(category)) {
    button.classList.remove('hidden');
  } else {
    button.classList.add('hidden');
  }
}

.hidden {
  text-decoration: line-through;
}

ChartJS doughnut data toggle on custom button click

1 Answers