Chart.js Doughnut Chart

A doughnut chart, also known as a donut chart, is essentially a pie chart with a hole in the center.

A doughnut chart is formed by stacking two or more differently sized pie charts together and removing the central part.

-

A pie chart uses the angles of circles and sectors within the circle to represent the magnitude of values. It is primarily used to show the proportion of data components in the whole dataset and is very useful for studying structural issues.

-

-

Doughnut charts are similar to pie charts but have a distinction. A doughnut chart has a "hole" in the center, with each sample represented by a ring, and each part of the data represented by a segment in the ring. Therefore, doughnut charts can display the corresponding proportions of multiple samples, facilitating comparative studies of their structures.

The type attribute for a doughnut chart is doughnut, which describes the chart type.

const config = {
  type: 'doughnut',
  data: data,
};

Next, we will create a simple doughnut chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'Doughnut Chart Example',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true, // Set the chart to be responsive, changing with the screen window
    maintainAspectRatio: false, // Maintain the original aspect ratio of the chart
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
};
const myChart = new Chart(ctx, config);

The output of the above example is: