React chart example
Donut chart
Compare shares of a whole with circular segments and an open centre for a total or label.
Options apply to compatible charts.
Synthetic sample data · Market share across 5 browsers.
What is a donut chart?
A donut chart is a pie chart with an open centre. Coloured arcs divide one whole into category shares. The centre creates space for a concise total or contextual label, but the underlying comparison remains part to whole.
When to use it
Use a donut for a compact snapshot of composition, such as browser share, spending allocation or account status. Two to five slices usually keep the breakdown readable, and the centre can provide the matching total. Choose bars for precise rankings, similar shares or tiny slices; use a time-series chart to show how the mix changes.
Design tips
Give the whole a clear definition and time period. “Browser share” needs a stated population before it can support a real business decision.
Keep the centre useful and uncluttered. If it contains a total, ensure that total matches the data represented by the ring.
Avoid too many thin slices. Similar shares are easier to compare as bars, and repeated donuts can obscure differences in absolute group size.
Graphy Chart SDK
Add Graphy’s donut charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.