React chart example
Racetrack chart
Show progress towards a goal as concentric arcs.
What is a racetrack chart?
A racetrack chart draws one arc per category on its own ring, each filled in proportion to its progress around the circle. Rings share a start angle so they can be compared.
When to use it
Use it for a handful of progress-to-goal measures where the circular form suits the surface — fitness rings, campaign completion. Arc length is harder to compare than bar length, so use a bar chart when accuracy matters more than the form.
Design tips
Keep every ring on the same scale and starting angle, or comparison breaks down.
Label each ring with its value; arcs alone are not readable to a percentage point.
Limit to about four rings before the centre gets too small to matter.
Build this chart in React
Compare with
Use for angular values that are not specifically progress to goal.
Use when one status needs a clear minimum and maximum.
Graphy Chart SDK
Add Graphy’s racetrack charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.