React chart example
Pie chart
Show how a small set of categories contributes to a whole, using slices sized by their share.
Options apply to compatible charts.
Synthetic sample data · Budget allocation across 6 departments.
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.
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.