Generic x/y heatmap with categorical axes
MatrixChart is a generic x/y heatmap with categorical axes. Each cell is colored based on a value. Data is an array of objects with x , y , and value properties.
Data is an array of MatrixChartCell objects:
Use xLabels and yLabels props to provide axis labels. Set withXLabels to display x-axis labels along the bottom (or top with xLabelsPosition="top" ), and withYLabels to display y-axis labels on the left side. Both label arrays are optional – when they are not provided, the labels are taken from the x and y values of data in the order they first appear.
By default, x-axis labels are rotated -90 degrees. Use xLabelsRotation prop to change the angle. Set it to 0 for horizontal labels or -45 for angled labels.
Set withTooltip prop and provide getTooltipLabel function to display a tooltip on cell hover.
Use colors prop to customize the color palette. Colors are interpolated based on the cell value within the domain range.
By default, domain is auto-calculated from data min/max values. Use domain prop to set a custom [min, max] range for color interpolation.
Use cellSize and gap props to control cell dimensions and spacing. cellRadius controls the border radius of cells.
Use getCellProps callback to add custom props to individual cells based on their data.
Set withLegend prop to display a color legend below the chart. Use legendLabels prop to customize the legend text.
Matrix cells are decorative rect elements – they carry no text for screen readers. Set aria-label (or aria-labelledby ) to describe what the chart shows; the chart is then exposed as a single labelled image instead of a grid of anonymous shapes: