Matrix Chart

Correlation / comparison matrix on a diverging scale: two hues for negative/positive with a neutral midpoint. Values are printed in each cell, so color is never the only encoding. Cell tooltips on hover, or focus + arrow keys (Up/Down change row).

Import

import { MatrixChart } from '@marbleui/ui'

Props

<MatrixChart>

Prop	Type	Default
labels *required	`string[]`	`—`
summary *required	`string`	`—`
values *required	`number[][]`	`—`
cell	`number`	`44`
className	`string`	`—`
domain	`[number, number]`	`[-1, 1]`
format	`(n: number) => string`	`(n: number) => n.toFixed(2)`
title	`string`	`—`

Usage notes

Square grid comparing every item in a list with every other, such as a correlation matrix, on a diverging scale with the value printed in each cell. For two different category axes use Heatmap.

<MatrixChart
  title="Account health correlations"
  summary="Churn correlates negatively with NPS (−0.71) and sessions (−0.62)."
  labels={['Sessions', 'NPS', 'Churn']}
  values={[[1, 0.44, -0.62], [0.44, 1, -0.71], [-0.62, -0.71, 1]]}
/>

labels name both rows and columns, so values must be labels.length × labels.length. Labels are used as keys; keep them unique.
Values above the midpoint of domain (default [-1, 1]) shade toward --chart-1, values below toward --chart-2, and values outside it are clamped. Set domain for other data, e.g. [-50, 50] for percentage change.
format sets the printed value (default two decimals) and cell the square size in pixels (default 44). Long labels are truncated; full names are in the tooltip and the “Show data” table. Tab focuses the grid; Left/Right step along a row, Up/Down change row, and a live region reads each cell.

Example source · show

import { MatrixChart } from './matrix-chart'

const labels = ['Sessions', 'Seats', 'Tickets', 'NPS', 'Churn']
const values = [[1, 0.82, 0.31, 0.44, -0.62], [0.82, 1, 0.4, 0.38, -0.55], [0.31, 0.4, 1, -0.28, 0.47], [0.44, 0.38, -0.28, 1, -0.71], [-0.62, -0.55, 0.47, -0.71, 1]]
export const styles = { Correlation: () => <MatrixChart title="Account health correlations" summary="Churn correlates negatively with NPS (−0.71) and sessions (−0.62), positively with support tickets (0.47)." labels={labels} values={values} /> }

Source: packages/ui/src/matrix-chart/matrix-chart.tsx

Catalog