Skip to content
InsightCharts

Search

Search guides and components

Source note

A sourcing footer for a whole piece: sources with optional links, the period covered, method, caveats and credit.

Use when
Once, at the end of a story or dashboard, to say where every number came from and how it was produced.
Avoid when
Sourcing a single chart: use that chart's own source and note props so the citation travels with its export.

Preview

Composition

Used in

1 molecule and 10 templates use source note.

Molecules

1

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

Templates

10

A compared with B on one page. It has a headline that states the result, the headline figures mirrored either side of their labels, one hero exhibit that shows both sides, paired exhibits on a shared scale, a verdict callout and a source note.

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 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 section of an analytical report laid out as a document. It has a title block, a summary, numbered findings, then method, limitations and sources. Each finding has one exhibit, an observation and a separately labelled interpretation with a confidence rating and a caveat.

A recurring report. It has a masthead with the report name and period, a headline that states the main change, a KPI grid with changes and sparklines, a ranked list beside one or two trend charts, an optional comparison table, short notes and a source note.

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 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/source-note

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

Examples

Inline

Sources: Office for National Statistics; Ofgem price cap tables. Data: Q1 2019 to Q4 2024. Method: Bills are for a typical dual-fuel household paying by direct debit, in 2024 prices. Note: Figures are approximate, for illustration. Credit: Chart design: A. Ruiz.

Single source, no rule

Source
World Bank, World Development Indicators
Note
Illustrative data for the gallery.

Props

PropTypeDefaultDescription
sourcesstring | { name, url? } | (string | { name, url? })[]Where the data comes from. Entries with a url are linked.
periodstringThe period the data covers, e.g. "2015 to 2024". Shown as "Data".
methodstringHow the numbers were produced: definitions, adjustments, exclusions.
notestringCaveats the reader should know.
creditstringWho made the piece.
layout"list" | "inline""list"Labelled list, or one running paragraph.
rulebooleantrueHairline above the note.
childrenReactNodeExtra content after the rows.