Chartjs-Representing multiple subsections within a section of a doughnut chart Chart.js

by

1👍

✅

You can use the generateLabels function as described here.

Please take a look at below runnable sample code and see how it works.

var labels = ['Incomplete', 'Sam', 'Claudia', 'Kevin', 'Sonia', 'Kate'];
var data = [14, 5, 4, 3, 7, 5];

new Chart('myChart', {
  type: 'doughnut',
  data: {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: labels.map((l, i) => i ? 'yellow' : 'lightblue'),
      weight: 0.6
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: () => [{
            text: 'Incomplete',
            fillStyle: 'lightblue',
            strokeStyle: 'lightblue',
          },
          {
            text: 'Complete',
            fillStyle: 'yellow',
            strokeStyle: 'yellow',
          }]
        }
      }
    }
  }
});
canvas {
  max-height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment