Skip to content
InsightCharts

Search

Search guides and components

Big number

A featured statistic with its label, change and the context that gives it meaning.

Use when
A single headline figure, or a row of three or four key numbers. Always give it context: a comparison, a denominator or a period.
Avoid when
Showing a number with no comparison; using a gauge or a one-slice donut for the same job.

Preview

Share of global electricity from renewables
31.7%
+2.1% vs 2023
Up from 19% in 2010

Composition

Used in

7 molecules and 7 templates use big number.

Molecules

7

A vertical sequence of dated events along a rail, each with a short explanation and, optionally, a small chart or figure.

Two states of one measure side by side, as figures or small charts, with the change between them stated in the middle.

The opening exhibit of a piece: kicker, headline and deck above one large chart, with a source line underneath.

A headline number with its composition underneath: one segmented bar and a key giving each part's value and share.

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.

A pull-quote paired with the statistic or small chart that backs it up, side by side and stacking in narrow containers.

Two to five key figures in one row separated by hairlines, collapsing to two columns and then one as the container narrows.

Templates

7

A vertical infographic in one narrow column. It opens with a big number or a proportion statement (hook), then the hero exhibit, then numbered sections with one exhibit each, a conclusion with an optional link, and sources.

A graphic that states one fact, at a fixed aspect ratio (1:1, 4:5, 16:9 or 9:16). It has a kicker, a headline, one exhibit, a source and a credit, painted on the theme surface. A button downloads the whole card as a PNG.

A sequence of full-frame cards (title, stat, chart, quote, closing) that the reader swipes or steps through. Each card states one fact. It has an optional fixed aspect ratio, a keyboard-accessible pager and a stacked layout for print.

A story told in date order. It has a headline, one overview exhibit of the whole period (a timeline chart or an annotated line), dated chapters along a rail, a closing paragraph and a source note. Each chapter has a short text and an optional small exhibit.

Directly, and throughAnnotated timeline

A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.

ThroughStat row

A one-page summary. It has a headline that states the main finding with its number, a deck, a row of three or four key figures, one hero chart with a takeaway callout, two smaller supporting exhibits, a short list of actions and a source note.

ThroughStat row

A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.

ThroughStat row

Installation

$ pnpm dlx shadcn@latest add @insightcharts/big-number

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 { BigNumber } from "insightcharts";

Props

PropTypeDefaultDescription
valuerequirednumber | stringThe figure. Numbers are formatted with format.
labelrequiredstringWhat it measures, sentence case.
contextstringThe comparison, denominator or period that gives it meaning.
deltanumber | stringChange against a baseline. Numbers render as signed percentages (0.12 is +12%).
deltaLabelstringWhat the delta is against, e.g. "vs last quarter".
upIsGoodbooleantrueWhether an increase is good news; decides the delta colour.
formatFormatSpec"auto"Number format.
size"hero" | "stat""stat"hero for the one number a piece leads with.
align"left" | "center""left"Text alignment.