The opening exhibit of a piece: kicker, headline and deck above one large chart, with a source line underneath.
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
sourceandnoteprops so the citation travels with its export.
Preview
import { SourceNote } from "insightcharts";
export function Example() {
return (
<SourceNote
sources={[
{
name: "Ember, European Electricity Review 2025",
url: "https://ember-energy.org",
},
{ name: "ENTSO-E Transparency Platform", url: "https://transparency.entsoe.eu" },
]}
note="Figures are approximate, for illustration"
period="January 2015 to December 2024, monthly"
method="Generation shares are net of pumped-storage consumption. Figures for 2024 are provisional and exclude Malta and Cyprus."
credit="Analysis and charts by the data desk"
/>
);
}{
"type": "source-note",
"sources": [
{
"name": "Ember, European Electricity Review 2025",
"url": "https://ember-energy.org"
},
{ "name": "ENTSO-E Transparency Platform", "url": "https://transparency.entsoe.eu" }
],
"note": "Figures are approximate, for illustration",
"period": "January 2015 to December 2024, monthly",
"method": "Generation shares are net of pumped-storage consumption. Figures for 2024 are provisional and exclude Malta and Cyprus.",
"credit": "Analysis and charts by the data desk"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
1 molecule and 10 templates use source note.
Molecules
1Templates
10A 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-noteThe 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
import { SourceNote } from "insightcharts";
export function Example() {
return (
<SourceNote
layout="inline"
sources={["Office for National Statistics", "Ofgem price cap tables"]}
note="Figures are approximate, for illustration"
period="Q1 2019 to Q4 2024"
method="Bills are for a typical dual-fuel household paying by direct debit, in 2024 prices"
credit="Chart design: A. Ruiz"
/>
);
}{
"type": "source-note",
"layout": "inline",
"sources": ["Office for National Statistics", "Ofgem price cap tables"],
"note": "Figures are approximate, for illustration",
"period": "Q1 2019 to Q4 2024",
"method": "Bills are for a typical dual-fuel household paying by direct debit, in 2024 prices",
"credit": "Chart design: A. Ruiz"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Single source, no rule
import { SourceNote } from "insightcharts";
export function Example() {
return (
<SourceNote
rule={false}
sources="World Bank, World Development Indicators"
note="Illustrative data for the gallery."
/>
);
}{
"type": "source-note",
"rule": false,
"sources": "World Bank, World Development Indicators",
"note": "Illustrative data for the gallery."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sources | string | { name, url? } | (string | { name, url? })[] | Where the data comes from. Entries with a url are linked. | |
| period | string | The period the data covers, e.g. "2015 to 2024". Shown as "Data". | |
| method | string | How the numbers were produced: definitions, adjustments, exclusions. | |
| note | string | Caveats the reader should know. | |
| credit | string | Who made the piece. | |
| layout | "list" | "inline" | "list" | Labelled list, or one running paragraph. |
| rule | boolean | true | Hairline above the note. |
| children | ReactNode | Extra content after the rows. |