[Chartjs]-How to use two datasets in chart.js doughnut chart?

by

16👍

✅

Just went through the code on their sample. It appears that an object in the data set array should have the following structure

{
            data: [
                <a number>,
                <a number>,
                ...
            ],
            backgroundColor: [
                <a colour>,
                <a colour>,
                ...
            ],
            label: 'Unique label for this data set
}

I have created the below snippet for you.

var config = {
  type: 'doughnut',
  data: {
    datasets: [
     /* Outer doughnut data starts*/
    {
      data: [
        10,
        20,
        30
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 1'
    },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
      data: [
        45,
        25,
        11
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 2'
    }
    /* Inner doughnut data ends*/
    ],
    labels: [
      "Info 1",
      "Info 2",
      "Info 3"
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Doughnut Chart'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(item, data) {
        console.log(data.labels, item);
            return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index];
        }
    }
}
  }
};
window.onload = function() {
  var ctx = document.getElementById("myChart")
    .getContext("2d");
  window.myDoughnut = new Chart(ctx, config);
};
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
</head>

<body>
  <canvas id="myChart"></canvas>
</body>

</html>

0👍

If you use Chart.js version 3.x or higher.

In the ‘data’ field, we add more charts by adding elements for the ‘datasets’ array.

data: {
  labels: [], // Label of Legends and Slices on Doughnut Chart.
  datasets: [
    {
      data: [], // Doughnut Chart data.
      backgroundColor: [], // Color of Slices on Doughnut Chart.
      ...
    }
  ]
};

Simple example:
enter image description here

var ctx = document.getElementById('myChart');
var data = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  datasets: [
    {
      data: [20, 40, 50, 70, 80],
      backgroundColor: ['#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#36a2eb'],
    },
    {
      data: [100, 30, 60, 10, 20],
      backgroundColor: ['#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#36a2eb'],
    },
  ],
};

var options = {
  responsive: true,
  plugins: {
    legend: {
      onClick: this.handleClick,
      onHover: this.handleHover,
      onLeave: this.handleLeave,
    },
  },
};

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data,
  options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Example: Legends for Two Chart Different Colors
enter image description here

var ctx = document.getElementById('myChart');
var data = {
  labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Tomato'],
  datasets: [
    {
      data: [20, 40, 50, null, null, null],
      backgroundColor: ['#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#36a2eb', 'tomato'],
    },
    {
      data: [null, null, null, 60, 10, 20],
      backgroundColor: [null, null, null, '#4bc0c0', '#36a2eb', 'tomato'],
    },
  ],
};

var options = {
  responsive: true,
  plugins: {
    legend: {
      onClick: this.handleClick,
      onHover: this.handleHover,
      onLeave: this.handleLeave,
    },
  },
};

var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data,
  options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Example: Legends for Multiple Chart Different Colors
enter image description here

Leave a comment