Skip to content
InsightCharts

Search

Search guides and components

Matrix poster

One wide landscape graphic that compares 4 to 12 entities on five to seven measures: two measures as S-curves between parallel scales on the left, joined to a table on the right in which every other number is drawn as dots, squares, icons, a ring, a circle or a bar. Both halves share one row order and one colour per entity.

Use when
Use it for profiles of a handful of comparable things with measures in different units: cities, species, products, stations, teams. Pass one row per entity with every measure in it. Put the two measures whose relationship matters in curve and the rest in columns, choosing a counted glyph (dots, blocks, icons) for small whole numbers, ring for shares, bar or circle for magnitudes. Leave highlight out to give every entity its own colour, derived from the theme when its palette is smaller than the number of entities; set it to draw one or two entities in colour and the rest in grey.
Avoid when
One measure across entities (use pill rank or bar chart). More than 12 entities (use data table or heatmap). A subject with a total and its parts (use ranking poster or flow poster). A phone-first piece: the table stacks into cards under 600px and the poster becomes long.

Preview

The preview scrolls inside its frame. A poster has the same colours in the site's light and dark modes. The toolbar has the poster themes and a PNG download. Expand it to see it in place, or open it full screen.

Full screen

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20
  4. Infographics10

Built from

The matrix poster template is assembled from 1 molecule and 2 poster primitives. Any slot also takes any other component.

Molecules

1

Poster

The sheet an infographic is composed on. It paints a full-bleed ground from a poster theme, forces one theme and colour mode on everything inside, and lays out a masthead, a grid of panels and a footer. It can save the whole sheet as one PNG.

Poster primitives

2

Curve rank

Places each entity on two parallel scales, one per measure, and joins its two positions with a smooth S-curve labelled with the name and both values.

Glyph table

A table with one row per entity in which every number is drawn as a small form chosen per column (counted dots, squares or icons, a ring, a sized circle, a bar) with the value printed beside it.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/matrix-poster

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { MatrixPoster } from "insightcharts";

Examples

Noir, eight seabirds, linked

Blueprint, ten weather stations, one highlighted, with download

Props

PropTypeDefaultDescription
rowsrequiredRow[]One object per entity, holding the name and every measure.
namestringField holding the entity name. Default: the first key of the first row.
nameLabelstringHeading of the table's name column.
curverequired{ left, right, leftLabel?, rightLabel?, leftFormat?, rightFormat?, leftTop?, rightTop?, title?, subtitle?, source?, ...curve-rank props }Left graphic: the two measures joined by one S-curve per entity (curve-rank). The poster's rows are ordered by left, largest first.
columnsrequired{ field, label?, glyph?, unit?, format?, max?, icon? }[]Right graphic: the glyph columns of the table, in order (glyph-table). Three to five read well beside the curves.
table{ title?, subtitle?, source?, note? }Short heading and source line over and under the table.
orderstring[]Entity names in display order, for both graphics. Default: largest first on the curve's left measure.
highlightstring | string[]Entities drawn in colour while every other one turns grey. Without it each entity has its own colour in both graphics.
titlerequiredstringThe poster's one fact, as a plain sentence with its number.
kickerstringSmall label above the title: the topic.
subtitlestringOne line under the title: the measure, population and period.
themePosterThemeName | string | ThemeInput"paper"Poster theme: noir, magenta, dusk, ocean, forest, blueprint, sunrise, paper, any other theme name, or a theme object.
mode"light" | "dark" | "auto" | "system""light"Colour mode of the poster and everything in it. A poster paints its own ground and does not follow the page unless you set auto. Only paper has a different dark variant.
downloadbooleanfalseShow a "Download PNG" control under the poster that saves the whole poster as one image.
maxWidthnumber | string1400Widest the poster is drawn. It is centred in wider containers.
linkedbooleanfalseMake the marks clickable. Clicking a mark in one graphic highlights the same name in every other graphic that has it, and filters the graphics that read the shared data. Click it again, or the empty ground of that graphic, to clear.
sourcesstring | string[]Where the data comes from, shown in the footer.
notestringCaveat shown in the footer, e.g. "Illustrative data".
creditstringWho made the poster, shown at the right of the footer.
level1 | 2 | 3 | 4 | 52Heading level of the title. Panel headings are one level down.