Pie charts are a classic way to visualize how different parts make up a whole. In React applications, pie charts are especially useful when you want to show proportions—such as market share, survey results, or budget allocations—where the total of all segments always represents 100%. Pie charts work best for datasets with a limited number of categories, since too many slices can make the chart hard to read. You should reach for a pie chart when you want to emphasize the relative size of each part compared to the total.

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
    },
  ],
};

In this structure, the labels array lists the names of each segment. The datasets array contains one object with a data array for the segment values, and a backgroundColor array that assigns a color to each segment. The length of data and labels must always match; Chart.js will render each value as a slice, colored according to backgroundColor. This format is different from bar or line charts, which often use multiple datasets.

Customizing your pie chart helps make it more readable and visually appealing. You can change the colors of each segment by modifying the backgroundColor array, or add borderColor and borderWidth for clearer separation between slices. Legends are generated automatically, but you can control their display and position using the chart options. For example, you can move the legend to the right, hide it, or change its font style. Adjusting these settings makes your chart match your application's style and improves user understanding.