Chart.js Pie Chart

A pie chart, also known as a pie graph, is a circular statistical chart divided into sectors to illustrate numerical proportions. It is used to depict the relative relationships between quantities, frequencies, or percentages. In a pie chart, the arc length (as well as the central angle and area) of each sector is proportional to the quantity it represents. These sectors together form a complete circle. As the name suggests, these sectors combine to create a pie-like pattern.

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

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

Next, we will create a simple doughnut chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'Pie Chart Example',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'pie',
  data: data,
  options: {
    responsive: true, // Set the chart to be responsive, adjusting based on 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 above example outputs the following result: