A grid of two categories, where the color of each cell follows a value. Use it to cross two lists, such as services by weekday.
It is plain svg, so it does not need any extra package. For days on a calendar, use Heatmap.
Each item has the column in x, the row in y and a value. A cell with null or 0 stays empty.
Set type or colors for the scale, xLabelsRotation for long names and valueLabel for the hover title.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | one item per cell | MatrixCell[] | MatrixCell | - |
| type | theme color of the scale | NormalTypes | 'default', 'primary', 'secondary', 'success', 'warning', 'error', 'info' | primary |
| colors | colors of the levels, from the lowest to the highest | string[] | - | 4 shades of type |
| domain | values that get the lowest and the highest color | [number, number] | - | from the data |
| cellSize | side of a cell, in pixels | number | - | 28 |
| gap | space between cells, in pixels | number | - | 2 |
| cellRadius | corner radius of a cell, in pixels | number | - | 3 |
| withXLabels | name the columns | boolean | - | true |
| withYLabels | name the rows | boolean | - | true |
| xLabelsRotation | angle of the column names, in degrees | number | - | 0 |
| withLegend | show the scale below | boolean | - | false |
| legendLabels | texts at the two ends of the legend | [string, string] | - | Less, More |
| valueLabel | text of the hover title of a cell | (cell: MatrixCell) => string | - | row, column: value |
| ... | native props, passed to the svg | SVGAttributes | 'aria-label', 'className', ... | - |
type MatrixCell = {
x: string // the column
y: string // the row
value: number | null // `null` leaves the cell empty
}
The ref points at the svg.
Value is shown by color only, and each cell has a hover title with its row, column and value. Describe the chart with aria-label or aria-labelledby. With a name it is an image, without one it is hidden from assistive technology.
For the exact numbers, offer the same data in a Table next to it.