React chart example
Headline number
State one number large, with its change and a supporting trend.
What is a headline number?
A headline number renders a single statistic at display size, usually with the change against a comparison period and a small trend line beneath it.
When to use it
Use it at the top of a dashboard or report for the number everyone came for. Pair it with a sparkline so the figure carries context rather than sitting alone. When more than about four numbers compete for the same treatment, none of them reads as the headline.
Design tips
Give the comparison period in words — “vs last month” — not just an arrow.
Keep the change colour semantic, and remember that down is not always bad.
Round to the precision the decision needs, not the precision the data has.
Build this chart in React
Compare with
Use when the full trajectory matters more than the latest value.
Compare several categories or period totals directly.
Graphy Chart SDK
Add Graphy’s headline numbers to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.