A vertical sequence of dated events along a rail, each with a short explanation and, optionally, a small chart or figure.
Step marker
A numbered chapter or step heading ("01 — Electricity sources in 2015") for sequencing the sections of a story.
- Use when
- When a piece has three to seven ordered chapters or steps. Open each one with a marker so the reader can see the position in the sequence.
- Avoid when
- Unordered sections (use headline with
size: "section"), or numbering a list of items inside a paragraph.
Preview
01Electricity sources in 2015
Europe's electricity generation by source in 2015.
import { StepMarker } from "insightcharts";
export function Example() {
return (
<StepMarker
step={1}
title="Electricity sources in 2015"
text="Europe's electricity generation by source in 2015."
size="lg"
/>
);
}{
"type": "step-marker",
"step": 1,
"title": "Electricity sources in 2015",
"text": "Europe's electricity generation by source in 2015.",
"size": "lg"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
2 molecules and 3 templates use step marker.
Molecules
2A 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
3A 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 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.
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.
ThroughAnnotated timeline
Installation
$ pnpm dlx shadcn@latest add @insightcharts/step-markerThe 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 { StepMarker } from "insightcharts";Examples
With total and rule
0205Solar module costs fell 82% in eight years
Average module cost per watt in each year.
import { StepMarker } from "insightcharts";
export function Example() {
return (
<StepMarker
step={2}
total={5}
title="Solar module costs fell 82% in eight years"
text="Average module cost per watt in each year."
rule
/>
);
}{
"type": "step-marker",
"step": 2,
"total": 5,
"title": "Solar module costs fell 82% in eight years",
"text": "Average module cost per watt in each year.",
"rule": true
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stacked
03Hours in which midday solar generation exceeded demand on the grid, by month and country
import { StepMarker } from "insightcharts";
export function Example() {
return (
<StepMarker
step={3}
title="Hours in which midday solar generation exceeded demand on the grid, by month and country"
layout="stacked"
size="lg"
/>
);
}{
"type": "step-marker",
"step": 3,
"title": "Hours in which midday solar generation exceeded demand on the grid, by month and country",
"layout": "stacked",
"size": "lg"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Letter step, title only
BFactors excluded from the forecast
import { StepMarker } from "insightcharts";
export function Example() {
return (
<StepMarker step="B" title="Factors excluded from the forecast" level={3} />
);
}{
"type": "step-marker",
"step": "B",
"title": "Factors excluded from the forecast",
"level": 3
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steprequired | number | string | Step number, zero-padded to two digits. Strings are shown as written. | |
| titlerequired | string | The chapter or step title. | |
| total | number | Total steps; the marker then reads "02 / 05". | |
| text | string | A sentence under the title. | |
| children | ReactNode | JSX alternative to text. | |
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level. |
| size | "md" | "lg" | "md" | lg for chapter openers. |
| layout | "inline" | "stacked" | "inline" | Number beside or above the title. Narrow containers always stack. |
| rule | boolean | false | Hairline above the marker. |