Charts · Matrix
Heatmap, correlation, calendar
Matrices are the densest charts in the system and the fastest to ruin. Cells stay square-ish, labels truncate rather than rotate into each other, and every matrix carries a legend that says what the colour means.
Categorical matrix
Sequential intensity, generous cell separation and a bottom legend.
Session intensity by weekday
Values prepared per cell; empty cells stay empty.
Correlation matrix
Diverging palette anchored at zero, symmetric grid, and a coefficient in every cell the reader can actually read. Ink is chosen per cell from the colour underneath it.
Asset correlation
Ten assets. Past twelve labels the matrix rotates and truncates instead of overlapping.
Small matrix
Four series in a wide card: the cells are huge, so every coefficient including the diagonal is printed in full.
Cross-asset correlation
A 4×4 matrix at the same card width as the ten-asset case.
Label policy
Values are a policy, not a constant. auto prints a coefficient while the cell can hold it — measured from the rendered cell, not the row count — so the same matrix gains and loses its numbers as the card is resized. Hover always carries the pair and the coefficient.
Twenty series, narrow card
400 cells in a 28rem column — the case auto exists for.
Calendar
One cell per day. Useful for activity and cadence, not for magnitude comparisons.
Daily data coverage · 2026
Current cell
A period matrix has a newest cell, and a reader should not have to count columns to find it. `highlight` marks the cells a caller names as current — the fill keeps saying what the value is, the edge says where the series is now.
Quarterly returns with the current quarter marked
The empty cell is the quarter still running; it is marked so it cannot read as a completed historical period.
Usage
Both matrix components take prepared values, never a dataframe.
<HeatmapChart xLabels={sessions} yLabels={days} values={matrix} />
// Default: coefficients appear while the cell can hold them.
<CorrelationMatrix labels={assets} values={correlations} />
// Force the policy when the answer must not depend on the viewport.
<CorrelationMatrix labels={assets} values={correlations} labelMode="never" />
<CorrelationMatrix labels={assets} values={correlations} labelMode="always" />
<CorrelationMatrix labels={assets} values={correlations} formatValue={(v) => v.toFixed(1)} />
// Sequential vs diverging: a diverging scale must be centred on zero.
<HeatmapChart min={-1} max={1} values={zScores} />