Skip to content
InsightCharts

Search

Search guides and components

Ranking poster

A poster of one subject by the numbers, in four rows: two figures in large type or as filled silhouettes, two treemaps side by side, a full-width ranking of centred pills with one row highlighted, and packed circles with icons beside a column of sized circles and a closing figure.

Use when
Use it for a profile of one event, place or organisation that has a headline total, two ways to split it, a ranking of 6 to 12 named things and a few supporting magnitudes: a festival, a race, a nature reserve, a library service. Put the total in the title and repeat it as the first figure. Highlight the ranking row the heading is about.
Avoid when
A subject whose point is a count of people or things (use count poster). Several entities compared on the same measures (use matrix poster). Eight or more small graphics on one subject (use atlas poster). A ranking alone (use pill rank in a poster).

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 ranking poster template is assembled from 1 molecule, 4 poster primitives and 1 other atom. 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

4

Circle pack

Shows parts as tightly packed circles sized by value, optionally clustered into groups, with the value and name printed inside each circle.

Pill rank

Shows a ranked list as horizontally centred rounded bars, with each name in capitals on its pill, the value at the left edge and the rank at the right.

Shape fill

Shows one or more percentages as icon silhouettes filled from the bottom to that level, with the number printed large beside each.

Stat circles

Shows a few related magnitudes as plain circles sized by area, each with its number set large and a short label.

Other atoms

1

Treemap

Shows parts of a whole as nested rectangles sized by value, optionally grouped into categories.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/ranking-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 { RankingPoster } from "insightcharts";

Examples

Paper, a road race, two statements

Ocean, a marine reserve, linked, with download

Props

PropTypeDefaultDescription
figures({ value, label, context?, icon? } | { data, name, value, icon, title?, ...shape-fill props } | Slot)[]Top row, up to two. A statement { value, label } is set in large light type (the first in the accent colour); a config with data draws silhouettes filled to their level (shape-fill).
breakdowns({ data, name, value, title?, ...treemap props } | Slot)[]Second row, up to two: the subject's total split two ways, as treemaps side by side.
rankingrequired{ data, name, value, highlight?, compare?, compareLabel?, title?, ...pill-rank props } | SlotThird row, full width: a ranking as centred pills with the value at the left and the rank at the right (pill-rank). highlight names the row drawn in the accent.
pack{ data, name, value, icon?, group?, title?, ...circle-pack props } | SlotBottom left: parts as packed circles (circle-pack). icon is one icon name or a map from circle name to icon.
circles{ data, name, value, unit?, title?, ...stat-circles props } | SlotBottom right: two to four related magnitudes as circles standing on one baseline (stat-circles).
figure{ value, label, context?, icon? }Bottom right, under the circles: one closing figure in large type.
formatFormatSpecHow to print values in the regions that set no format of their own.
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"dusk"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 | string1100Widest 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.
dataDataInputRows shared by every region whose config leaves out its own data. With linked, a click filters those regions.
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.