[Chartjs]-ChartJS doughnut data toggle on custom button click

by

3👍

✅

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<div style="display: flex; flex-direction: column; align-items: center;">
  <div style="display: flex; gap: 10px; margin-bottom: 10px">
    <button id="category0" onclick="toggleData(this, 0)">category0</button>
    <button id="category1" onclick="toggleData(this, 1)">category1</button>
    <button id="category2" onclick="toggleData(this, 2)">category2</button>
    <button id="category3" onclick="toggleData(this, 3)">category3</button>
  </div>
  <canvas id="chart" width="200"></canvas>
</div>

Leave a comment