Chartjs-ChartJs – Doughnut Chart – how to remove labels if percentage is less than a limit

by

1👍

✅

It looks like chartjs-plugin-labels is being used, in which case passing a custom function to the render option will do the trick, as per the documentation:

const data = [1, 2, 7],
  myChartOptions = {
    responsive: true,
    animation: {
      animateScale: true,
      animateRotate: true
    },
    plugins: {
      labels: {
        render: args => {
          if (args.percentage < 20) {
            return '';
          }
          return args.percentage + '%';
        },
        fontColor: '#000000',
        precision: 2,
      }
    }
  };

new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      label: 'series 1',
      data: data,
      backgroundColor: ['pink', 'lightgreen', 'lightblue'],
    }]
  },
  options: myChartOptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

Leave a comment