Matrix Chart

Compact x/y heatmap with categorical string axes, fixed-size cells and empty slots.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Each { x, y, value } cell is colored by its value. Columns and rows follow the order the labels first appear in the data, and null marks an empty cell.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return (
    <MatrixChart
      title="Visitors by hour"
      data={VISITORS}
      tooltip={{ formatter: ({ x, y, value }) => `${y} ${x}: ${value === null ? 'No data' : `${value} visitors`}` }}
    />
  );
}

Labels

xLabels and yLabels fix the column and row order. withXLabels and withYLabels hide either axis, and xLabelsPosition="top" moves the column labels above the grid.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { DAYS, HOURS, VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} xLabels={HOURS} yLabels={DAYS} xLabelsPosition="top" />;
}

Column label rotation

xLabelsRotation tilts the column labels; the band under the grid grows to fit them. Use -90 for long labels.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} xLabelsRotation={-45} />;
}

Colors

colors is the ramp cells interpolate across, low to high. The default is four shades of the theme's first accent color.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} colors={['#FFEDD5', '#FDBA74', '#F97316', '#9A3412']} />;
}

Values domain

domain pins the value range mapped onto the colors, so charts with different data share one scale. By default it is the data's min and max.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} domain={[0, 50]} />;
}

Cell size and gap

cellSize sets the cells in px instead of fitting them to the width, and still shrinks them on narrow screens; gap and cellRadius space and round them.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} cellSize={30} gap={3} cellRadius={4} />;
}

Cell props

getCellProps returns extra SVG attributes for a cell, here a fill decided by thresholds rather than the color ramp.

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return (
    <MatrixChart
      data={VISITORS}
      getCellProps={(cell) => {
        if (cell.value === null) return undefined;
        if (cell.value >= 25) return { fill: '#1baf7a' };
        if (cell.value >= 15) return { fill: '#eda100' };
        return { fill: '#e34948' };
      }}
    />
  );
}

Legend

legend.show adds the color ramp below the grid, captioned with legend.labels (Less and More by default).

Loading demo…

import { MatrixChart } from '@plocks/charts';

import { VISITORS } from './data';

export function Demo() {
  return <MatrixChart data={VISITORS} legend={{ show: true, labels: ['Quiet', 'Busy'] }} />;
}

Scan to open this page on your phoneplocks.dev/charts/MatrixChart

Related charts

Heatmap

Histogram

Matrix Chart

Basics

Labels

Column label rotation

Colors

Values domain

Cell size and gap

Cell props

Legend

Related charts

Further reading

plocks