Possibility for adding multiple label-arrays for multiple dataset doughnut diagrams

When creating a doughnut diagram with multiple rings there seems to be no option for adding different arrays of labels. One array for each dataset. For example in this chart a option, so every item has it’s color name as label (tooltip):

  var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
  type: 'doughnut',
      data: {
          labels: ["Green", "Yellow", "Red", "Purple", "Blue"],
          datasets: [
            {
              data: [1,2,3,4,5],
              backgroundColor: [
                  'green',
                  'yellow',
                  'red',
                  'purple',
                  'blue',
              ],
            },
            {
              data: [6,7,8],
              backgroundColor: [
                  'black',
                  'grey',
                  'lightgrey'
              ],
            },
          ]
      },
  options: {
    responsive: true,
    legend: {
      display: false,
    }
  }
  });

https://jsfiddle.net/tgsdje3r/

Author: Fantashit

3 thoughts on “Possibility for adding multiple label-arrays for multiple dataset doughnut diagrams

  1. Hope you don’t mind, I’m just going to copy the code out of that fiddle and paste it here in case it disappears since it’s really useful!

    var ctx = $("#myChart");
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [1, 2, 3, 4, 5],
                backgroundColor: [
                    'green',
                    'yellow',
                    'red',
                    'purple',
                    'blue',
                ],
                labels: [
                    'green',
                    'yellow',
                    'red',
                    'purple',
                    'blue',
                ]
            }, {
                data: [6, 7, 8],
                backgroundColor: [
                    'black',
                    'grey',
                    'lightgrey'
                ],
                labels: [
                    'black',
                    'grey',
                    'lightgrey'
                ],
            },]
        },
        options: {
            responsive: true,
            legend: {
                display: false,
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var dataset = data.datasets[tooltipItem.datasetIndex];
                        var index = tooltipItem.index;
                        return dataset.labels[index] + ': ' + dataset.data[index];
                    }
                }
            }
        }
    });

Comments are closed.