Data Display

MatrixChart

Categorical × categorical heatmap for dense analytics, confusion matrices, and correlation grids.

import { MatrixChart } from '@lostgradient/cinder/matrix-chart';
chartheatmapmatrixanalytics
01

Overview

Categorical × categorical heatmap for dense analytics, confusion matrices, and correlation grids.

Usage

svelte 
<script lang="ts">
  import { MatrixChart } from '@lostgradient/cinder/matrix-chart';
</script>

Guidance

Use When

  • Showing density or magnitude across two categorical dimensions simultaneously.
  • Rendering a confusion matrix where rows are actual classes and columns are predicted classes.

Avoid When

  • Showing a continuous trend over time — use line-chart instead.
  • Comparing discrete category totals — use bar-chart instead.
Live preview
02

When to use

Use when
  • Showing density or magnitude across two categorical dimensions simultaneously.
  • Rendering a confusion matrix where rows are actual classes and columns are predicted classes.
Avoid when
  • Showing a continuous trend over time — use line-chart instead.
  • Comparing discrete category totals — use bar-chart instead.
03

Examples

Confusion matrix

A 3-class confusion matrix showing predicted vs actual classification results.

Performance heatmap

Team performance scores across quarters, colored with a diverging scale.

04

Props

Props for matrix-chart
Name Type Default Required Bindable Description
label text req Accessible label for the chart. Required for screen readers.
description text Optional description rendered below the label.
data MatrixChartDatum[] req Rows of data. Each row must include the keys named by the xField, yField, and valueField props.
xField text req Key on each datum used for the x-axis (columns).
yField text req Key on each datum used for the y-axis (rows).
valueField text req Key on each datum used for the numeric cell value.
colorScale 'sequential' | 'diverging' 'sequential' Color interpolation scale. Default sequential.
cellLabelsVisible boolean true Show cell value labels. Default true.
height number 280 Pixel height of the chart viewport. Default 280.
loading boolean false Whether the chart is in a loading state.
dataTableCaption text Custom data table caption; falls back to label.
dataTableVisibility 'screen-reader-only' | 'visible' | 'hidden' 'screen-reader-only' Controls data table visibility. Default screen-reader-only.
empty snippet Snippet rendered when the chart has no data.
loadingContent snippet Snippet rendered while the chart is loading.
id unknown req