A vertical sequence of dated events along a rail, each with a short explanation and, optionally, a small chart or figure.
Prose
A readable block of narration at a 45-75 character measure, for the text between charts.
- Use when
- To say what a chart showed and introduce the next one. Use two or three short paragraphs at a time.
- Avoid when
- A single statement of fact (use callout), a quotation (use pull quote), or sourcing and method notes (use source note).
Preview
In 2015 solar supplied 3% of Europe's electricity. Hydro supplied more than three times as much.
Panel prices fell by about 80% in the years that followed. In 2024 solar generated more electricity than coal across the EU, according to Ember's annual review.
Solar's share differs by country. The next chart shows it for each EU member state.
import { Prose } from "insightcharts";
export function Example() {
return (
<Prose
text={"In 2015 solar supplied **3% of Europe's electricity**. Hydro supplied more than three times as much.\n\nPanel prices fell by about 80% in the years that followed. In 2024 solar generated more electricity than coal across the EU, according to [Ember's annual review](https://ember-energy.org).\n\nSolar's share differs by country. The next chart shows it for each EU member state."}
/>
);
}{
"type": "prose",
"text": "In 2015 solar supplied **3% of Europe's electricity**. Hydro supplied more than three times as much.\n\nPanel prices fell by about 80% in the years that followed. In 2024 solar generated more electricity than coal across the EU, according to [Ember's annual review](https://ember-energy.org).\n\nSolar's share differs by country. The next chart shows it for each EU member state."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
3 molecules and 8 templates use prose.
Molecules
3A scroll-driven story from JSON: one base chart spec and a list of steps, each with narration and a patch of chart props applied while that step is active.
A story section: a numbered step marker or a headline, introductory prose, then one or more exhibits in a responsive one- to three-column grid.
Templates
8A 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 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 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 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.
Directly, and throughScrolly chart
Installation
$ pnpm dlx shadcn@latest add @insightcharts/proseThe 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 { Prose } from "insightcharts";Examples
Lead paragraph, large
The typical household energy bill almost doubled between the winter of 2020 and the winter of 2022.
Wholesale prices have fallen since then. Standing charges and network costs have not fallen. The average bill is still about a third higher than it was in 2020.
import { Prose } from "insightcharts";
export function Example() {
return (
<Prose
size="lg"
lead
text={[
"The typical household energy bill almost doubled between the winter of 2020 and the winter of 2022.",
"Wholesale prices have fallen since then. Standing charges and network costs have not fallen. The average bill is still about a third higher than it was in 2020.",
]}
/>
);
}{
"type": "prose",
"size": "lg",
"lead": true,
"text": [
"The typical household energy bill almost doubled between the winter of 2020 and the winter of 2022.",
"Wholesale prices have fallen since then. Standing charges and network costs have not fallen. The average bill is still about a third higher than it was in 2020."
]
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Muted aside, narrow measure
How to read this section. Each dot is one local authority. Dots further right have more installed capacity per person. The vertical position shows median household income.
import { Prose } from "insightcharts";
export function Example() {
return (
<Prose
size="sm"
tone="muted"
measure={48}
text="*How to read this section.* Each dot is one local authority. Dots further right have more installed capacity per person. The vertical position shows median household income."
/>
);
}{
"type": "prose",
"size": "sm",
"tone": "muted",
"measure": 48,
"text": "*How to read this section.* Each dot is one local authority. Dots further right have more installed capacity per person. The vertical position shows median household income."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | string[] | Narration. Blank lines separate paragraphs. Supports **bold**, *italic* and [link](url). | |
| children | ReactNode | JSX alternative to text. | |
| size | "sm" | "md" | "lg" | "md" | Body size: 14, 16 or 18px. |
| measure | number | 65 | Line length in characters, clamped to 45-75. |
| lead | boolean | false | Set the first paragraph a step larger. |
| tone | "default" | "muted" | "default" | muted for secondary narration. |
| align | "left" | "center" | "left" | Centres the block (text stays left-aligned). |