React chart example
Warming stripes
Show a long run of values as a row of coloured bands, one per period.
What is a warming stripes?
Warming stripes drop the value axis entirely and encode each period as a band of colour on a diverging scale. The result is a single row that reads as a pattern rather than a set of readings.
When to use it
Use it for long series where the overall drift matters more than any single value — a century of temperature anomalies, decades of deficits. It is a poster, not an instrument. Use a line chart when readers need to take numbers off the chart.
Design tips
Anchor the diverging scale at a meaningful midpoint, and say what that midpoint is.
Label only the first and last period; the row is a shape, not a table.
Check the palette for colour-vision safety — the whole chart is colour.
Build this chart in React
Compare with
Compare values across a two-dimensional categorical grid.
Use when readers need exact values and a visible trajectory.
Graphy Chart SDK
Add Graphy’s warming stripess to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.