Skip to content
InsightCharts

Search

Search guides and components

Profile poster

A poster that describes one subject from four sides: the subject as one large silhouette filled to a share (`shape-fill`), two to four large figures, its place among other things on one scale (`scale-ladder`), and a table that sets it beside its peers with every number drawn as a small form (`glyph-table`).

Use when
Use it for a fact sheet about one named thing: a vehicle, a reservoir, a building, a machine, a species. Give portrait one row with the share that defines the subject and the icon that stands for it, figures the numbers a reader should take away, scale the subject among 4 to 10 reference points, and table the subject beside 2 to 6 peers. Highlight the subject in scale and table. On a sheet at least 960px wide the silhouette, the figures and the scale stand in three columns.
Avoid when
Several subjects of equal weight (use glyph table in a poster, or ranking poster). A subject whose parts are the point (use radial poster). A subject with no defining share: leave portrait to a full spec such as stat circles, or use scale poster when the scale is the whole subject. Change over time (use timeline 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 profile poster template is assembled from 1 molecule and 3 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

3

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.

Scale ladder

A tall vertical band graded along one scale (linear or log, running up or down) with each item placed at its true position and labelled with an icon, its name and its value on alternating sides.

Shape fill

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

Installation

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

Examples

Dusk, a reservoir, depths read downwards, linked

Paper, a wind turbine, no table, with download

Props

PropTypeDefaultDescription
portraitrequired{ data, name, value, icon, max?, format?, title?, ... } | SlotThe portrait: one silhouette filled from the bottom to the share in its row, with the number beside it, drawn by shape-fill. format defaults to "{value}%". A full spec or element replaces it.
figures{ value: string; label: string; context?: string; icon?: string; tag?: string }[]Two to four large figures about the subject. In the three-column layout they stand between the silhouette and the scale; otherwise they run in a strip.
scale{ data, name, value, iconField?, direction?, scale?, min?, max?, zones?, scaleLabel?, highlight?, format?, title?, ... } | SlotThe subject among 4 to 10 other things on one scale (scale-ladder). It is drawn as tall as the silhouette.
table{ rows, name, columns, nameLabel?, highlight?, order?, title?, ... } | SlotThe subject beside its peers, one row each, with a glyph per measure (glyph-table). columns is { field, label?, glyph?, unit?, format?, max?, icon? }[].
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"blueprint"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.