Chart.js Pie Chart

A pie chart, or pie diagram, is a circular statistical chart divided into several sectors, used to describe the relative relationships among 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. Together, these sectors form a complete circle. As the name suggests, these sectors make up a sliced pie-shaped pattern.

Pie CharttypeThe attribute ispie, type describes the chart type.

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

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

Try it »

The output of the above example is:

Other Extensions