A vertical sequence of dated events along a rail, each with a short explanation and, optionally, a small chart or figure.
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
import { BigNumber } from "insightcharts";
export function Example() {
return (
<BigNumber
value={0.317}
format="percent"
label="Share of global electricity from renewables"
delta={0.021}
deltaLabel="vs 2023"
context="Up from 19% in 2010"
/>
);
}{
"type": "big-number",
"value": 0.317,
"format": "percent",
"label": "Share of global electricity from renewables",
"delta": 0.021,
"deltaLabel": "vs 2023",
"context": "Up from 19% in 2010"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
7 molecules and 7 templates use big number.
Molecules
7Two 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
7A 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.
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.
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.
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.
Installation
$ pnpm dlx shadcn@latest add @insightcharts/big-numberThe 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
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | number | string | The figure. Numbers are formatted with format. | |
| labelrequired | string | What it measures, sentence case. | |
| context | string | The comparison, denominator or period that gives it meaning. | |
| delta | number | string | Change against a baseline. Numbers render as signed percentages (0.12 is +12%). | |
| deltaLabel | string | What the delta is against, e.g. "vs last quarter". | |
| upIsGood | boolean | true | Whether an increase is good news; decides the delta colour. |
| format | FormatSpec | "auto" | Number format. |
| size | "hero" | "stat" | "stat" | hero for the one number a piece leads with. |
| align | "left" | "center" | "left" | Text alignment. |