React chart example
Pie chart
Show how a small set of categories contributes to a whole, using slices sized by their share.
Budget by department
See the composition of a departmental budget.
What is a pie chart?
A pie chart divides a circle into slices to show how categories contribute to one total. Each slice’s angle represents its share of that whole. It works as a compact overview of composition, especially when one or two categories dominate.
When to use it
Use a pie to show how a small set of mutually exclusive categories divides a meaningful whole, such as a budget or response breakdown. Two to five slices are a useful starting point. Choose bars when shares are similar or tiny slices need comparing. Use a time-series chart when the question is how the breakdown changes over time.
Design tips
Check that the categories do not overlap and that values are non-negative. A pie cannot meaningfully show negative contributions to a whole.
Use a few distinct colours and readable labels. Combine very small categories only when the resulting “Other” slice does not hide a useful distinction.
Avoid 3D perspective and exploded slices that distort apparent size. For similar shares, a bar chart’s common baseline is easier to compare.
Build this chart in React
Compare with
Use when the centre should hold a concise total or label.
Use when similar slices need a shared baseline for precise ranking.
Graphy Chart SDK
Add Graphy’s pie charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.