React chart example
Matrix heatmap
Scan values across two categorical dimensions, using colour to reveal patterns, clusters and contrasts.
Options apply to compatible charts.
Synthetic sample data · 4 products across 4 regions.
What is a matrix heatmap?
A matrix heatmap uses a grid of coloured cells to compare values across two categorical dimensions. One dimension defines the rows and the other defines the columns. Colour reveals broad patterns, while labels or hover details support exact readings.
When to use it
Use a matrix heatmap to scan patterns across two dimensions, such as product by region or day by hour. It is useful when a grid contains more comparisons than bars can show clearly. If the result has only one row or column, or exact differences drive the decision, use a bar chart or table instead.
Design tips
Choose a row and column order that helps the question: familiar business order, time order or a deliberate ranking. Avoid rearranging both dimensions without explanation.
Use a continuous colour scale for numeric magnitude, with a visible key when colour must be interpreted quantitatively.
If you normalise within each row, say so. Row-normalised colours show a product’s relative pattern and cannot be read as absolute comparisons between products.
Graphy Chart SDK
Add Graphy’s matrix heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.