Chart.js Doughnut Chart

A doughnut chart, also called a donut chart, is essentially a pie chart with the middle area hollowed out.

A doughnut chart is a graph formed by stacking two or more pie charts of different sizes and removing the middle part.

  • A pie chart is a graph that uses a circle and the angles of sectors within the circle to represent the magnitude of values. It is mainly used to show the proportion of each component's data to the whole in a sample (or population), and is very useful for studying structural problems.

  • A doughnut chart is similar to a pie chart, but there are differences. A doughnut chart has a "hole" in the middle. Each sample is represented by a ring, and each part of the data in the sample is represented by a segment of the ring. Therefore, a doughnut chart can display the corresponding proportions of parts in multiple samples, which facilitates comparative research on composition.

Doughnut CharttypeThe property isdoughnut, and type describes the chart type.

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

Next, let's 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 according to screen window changes
    maintainAspectRatio: false,// Keep the chart's original aspect ratio
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
                }
          }]
    }
  }
};
const myChart = new Chart(ctx, config);

Try it yourself »

The output of the above example is:

Other Extensions