React chart example
Diverging heatmap
Show values above and below a meaningful midpoint, with two colour directions revealing the size of each difference.
Options apply to compatible charts.
Synthetic sample data · Returns for 5 assets across 6 months, including positive and negative values.
What is a diverging heatmap?
A diverging heatmap uses two colour directions around a meaningful midpoint. One side represents values below that reference and the other represents values above it. It helps readers distinguish direction as well as the magnitude of a deviation.
When to use it
Use it for changes above and below zero, variance from a target, or another measure with a meaningful centre. A sequential scale is more appropriate when all values simply progress from low to high. The midpoint should come from the question, not be chosen just to balance the colours.
Design tips
Make the midpoint explicit and keep the scale fixed when comparing views. A colour associated with a gain in one view should not indicate a loss in another.
Consider symmetric limits around zero when equal positive and negative deviations should have equal visual weight. Explain asymmetric limits if you use them.
Do not rely on red versus green alone. Use distinguishable hues, a legend and values so the direction remains understandable to more readers.
Graphy Chart SDK
Add Graphy’s diverging heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.