A vertical sequence of dated events along a rail, each with a short explanation and, optionally, a small chart or figure.
Sparkline
A word-sized line or bar series without axes, with the latest point marked.
- Use when
- Showing the recent history of a number inside a stat tile, a table cell or a sentence, where the shape of the trend matters and exact values do not.
- Avoid when
- Anything the reader must read values from or compare across series (use line chart); fewer than about 5 points (state the change in words or use big number with a delta).
Preview
import { Sparkline } from "insightcharts";
const data = [
{ month: "2023-07", rate: 3.9 },
{ month: "2023-08", rate: 3.8 },
{ month: "2023-09", rate: 3.8 },
{ month: "2023-10", rate: 3.6 },
{ month: "2023-11", rate: 3.5 },
{ month: "2023-12", rate: 3.6 },
{ month: "2024-01", rate: 3.4 },
{ month: "2024-02", rate: 3.7 },
{ month: "2024-03", rate: 3.8 },
{ month: "2024-04", rate: 3.9 },
{ month: "2024-05", rate: 4.1 },
{ month: "2024-06", rate: 4.3 },
{ month: "2024-07", rate: 4.2 },
{ month: "2024-08", rate: 4.1 },
{ month: "2024-09", rate: 4.2 },
{ month: "2024-10", rate: 4.4 },
];
export function Example() {
return (
<Sparkline
data={data}
x="month"
y="rate"
format={"{value}%"}
showValue
extremes
style={{ maxWidth: 220 }}
alt="Sparkline of the unemployment rate over 16 months, July 2023 to October 2024. It started at 3.9%, fell to 3.4% in January 2024 and ended at 4.4%, the highest in the period."
/>
);
}{
"type": "sparkline",
"data": [
{ "month": "2023-07", "rate": 3.9 },
{ "month": "2023-08", "rate": 3.8 },
{ "month": "2023-09", "rate": 3.8 },
{ "month": "2023-10", "rate": 3.6 },
{ "month": "2023-11", "rate": 3.5 },
{ "month": "2023-12", "rate": 3.6 },
{ "month": "2024-01", "rate": 3.4 },
{ "month": "2024-02", "rate": 3.7 },
{ "month": "2024-03", "rate": 3.8 },
{ "month": "2024-04", "rate": 3.9 },
{ "month": "2024-05", "rate": 4.1 },
{ "month": "2024-06", "rate": 4.3 },
{ "month": "2024-07", "rate": 4.2 },
{ "month": "2024-08", "rate": 4.1 },
{ "month": "2024-09", "rate": 4.2 },
{ "month": "2024-10", "rate": 4.4 }
],
"x": "month",
"y": "rate",
"format": "{value}%",
"showValue": true,
"extremes": true,
"style": { "maxWidth": 220 },
"alt": "Sparkline of the unemployment rate over 16 months, July 2023 to October 2024. It started at 3.9%, fell to 3.4% in January 2024 and ended at 4.4%, the highest in the period."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
5 molecules and 2 templates use sparkline.
Molecules
5Two states of one measure side by side, as figures or small charts, with the change between them stated in the middle.
A table whose rows carry inline sparklines, deltas and in-cell bars beside their exact values, from rows and a column config.
A pull-quote paired with the statistic or small chart that backs it up, side by side and stacking in narrow containers.
A KPI card computed from a series: the latest value, its change against a baseline in the same data, and a sparkline of the series.
Templates
2A 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.
ThroughComparison table
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/sparklineThe 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 { Sparkline } from "insightcharts";Examples
With a reference band
Blood glucose over 48 readings
Blood glucose, mmol/L. The band is the 3.9 to 7.0 target range.
import { Sparkline } from "insightcharts";
const data = [
{ reading: 1, mmol: 5.6 },
{ reading: 2, mmol: 5.8 },
{ reading: 3, mmol: 5.5 },
{ reading: 4, mmol: 5.6 },
{ reading: 5, mmol: 5.2 },
{ reading: 6, mmol: 5.3 },
{ reading: 7, mmol: 5.5 },
{ reading: 8, mmol: 5.5 },
{ reading: 9, mmol: 5.8 },
{ reading: 10, mmol: 5.5 },
{ reading: 11, mmol: 5.8 },
{ reading: 12, mmol: 5.9 },
{ reading: 13, mmol: 6 },
{ reading: 14, mmol: 5.5 },
{ reading: 15, mmol: 5.5 },
{ reading: 16, mmol: 5.3 },
{ reading: 17, mmol: 5.6 },
{ reading: 18, mmol: 5.4 },
{ reading: 19, mmol: 5.7 },
{ reading: 20, mmol: 5.8 },
{ reading: 21, mmol: 5.6 },
{ reading: 22, mmol: 5.1 },
{ reading: 23, mmol: 5.4 },
{ reading: 24, mmol: 5.1 },
{ reading: 25, mmol: 5 },
{ reading: 26, mmol: 4.7 },
{ reading: 27, mmol: 4.7 },
{ reading: 28, mmol: 5.3 },
{ reading: 29, mmol: 5 },
{ reading: 30, mmol: 4.7 },
{ reading: 31, mmol: 5.1 },
{ reading: 32, mmol: 5.4 },
{ reading: 33, mmol: 5.8 },
{ reading: 34, mmol: 6.6 },
{ reading: 35, mmol: 6.7 },
{ reading: 36, mmol: 6.9 },
{ reading: 37, mmol: 6.9 },
{ reading: 38, mmol: 7.5 },
{ reading: 39, mmol: 7.5 },
{ reading: 40, mmol: 7.6 },
{ reading: 41, mmol: 7.3 },
{ reading: 42, mmol: 7.4 },
{ reading: 43, mmol: 7.3 },
{ reading: 44, mmol: 6.7 },
{ reading: 45, mmol: 6.7 },
{ reading: 46, mmol: 6.6 },
{ reading: 47, mmol: 6.3 },
{ reading: 48, mmol: 6.4 },
];
export function Example() {
return (
<Sparkline
data={data}
x="reading"
y="mmol"
band={[3.9, 7]}
extremes
showValue
format="decimal:1"
style={{ maxWidth: 280 }}
title="Blood glucose over 48 readings"
subtitle="Blood glucose, mmol/L. The band is the 3.9 to 7.0 target range."
note="Illustrative data"
/>
);
}{
"type": "sparkline",
"data": [
{ "reading": 1, "mmol": 5.6 },
{ "reading": 2, "mmol": 5.8 },
{ "reading": 3, "mmol": 5.5 },
{ "reading": 4, "mmol": 5.6 },
{ "reading": 5, "mmol": 5.2 },
{ "reading": 6, "mmol": 5.3 },
{ "reading": 7, "mmol": 5.5 },
{ "reading": 8, "mmol": 5.5 },
{ "reading": 9, "mmol": 5.8 },
{ "reading": 10, "mmol": 5.5 },
{ "reading": 11, "mmol": 5.8 },
{ "reading": 12, "mmol": 5.9 },
{ "reading": 13, "mmol": 6 },
{ "reading": 14, "mmol": 5.5 },
{ "reading": 15, "mmol": 5.5 },
{ "reading": 16, "mmol": 5.3 },
{ "reading": 17, "mmol": 5.6 },
{ "reading": 18, "mmol": 5.4 },
{ "reading": 19, "mmol": 5.7 },
{ "reading": 20, "mmol": 5.8 },
{ "reading": 21, "mmol": 5.6 },
{ "reading": 22, "mmol": 5.1 },
{ "reading": 23, "mmol": 5.4 },
{ "reading": 24, "mmol": 5.1 },
{ "reading": 25, "mmol": 5 },
{ "reading": 26, "mmol": 4.7 },
{ "reading": 27, "mmol": 4.7 },
{ "reading": 28, "mmol": 5.3 },
{ "reading": 29, "mmol": 5 },
{ "reading": 30, "mmol": 4.7 },
{ "reading": 31, "mmol": 5.1 },
{ "reading": 32, "mmol": 5.4 },
{ "reading": 33, "mmol": 5.8 },
{ "reading": 34, "mmol": 6.6 },
{ "reading": 35, "mmol": 6.7 },
{ "reading": 36, "mmol": 6.9 },
{ "reading": 37, "mmol": 6.9 },
{ "reading": 38, "mmol": 7.5 },
{ "reading": 39, "mmol": 7.5 },
{ "reading": 40, "mmol": 7.6 },
{ "reading": 41, "mmol": 7.3 },
{ "reading": 42, "mmol": 7.4 },
{ "reading": 43, "mmol": 7.3 },
{ "reading": 44, "mmol": 6.7 },
{ "reading": 45, "mmol": 6.7 },
{ "reading": 46, "mmol": 6.6 },
{ "reading": 47, "mmol": 6.3 },
{ "reading": 48, "mmol": 6.4 }
],
"x": "reading",
"y": "mmol",
"band": [3.9, 7],
"extremes": true,
"showValue": true,
"format": "decimal:1",
"style": { "maxWidth": 280 },
"title": "Blood glucose over 48 readings",
"subtitle": "Blood glucose, mmol/L. The band is the 3.9 to 7.0 target range.",
"note": "Illustrative data"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Bars: gains and losses
import { Sparkline } from "insightcharts";
const data = [
{ week: "W1", net: 4 },
{ week: "W2", net: 7 },
{ week: "W3", net: -3 },
{ week: "W4", net: 5 },
{ week: "W5", net: 9 },
{ week: "W6", net: -6 },
{ week: "W7", net: -2 },
{ week: "W8", net: 8 },
{ week: "W9", net: 11 },
{ week: "W10", net: 3 },
{ week: "W11", net: -4 },
{ week: "W12", net: 6 },
{ week: "W13", net: 10 },
{ week: "W14", net: 12 },
];
export function Example() {
return (
<Sparkline
data={data}
x="week"
y="net"
mark="bar"
showValue
format="signed"
style={{ maxWidth: 220 }}
/>
);
}{
"type": "sparkline",
"data": [
{ "week": "W1", "net": 4 },
{ "week": "W2", "net": 7 },
{ "week": "W3", "net": -3 },
{ "week": "W4", "net": 5 },
{ "week": "W5", "net": 9 },
{ "week": "W6", "net": -6 },
{ "week": "W7", "net": -2 },
{ "week": "W8", "net": 8 },
{ "week": "W9", "net": 11 },
{ "week": "W10", "net": 3 },
{ "week": "W11", "net": -4 },
{ "week": "W12", "net": 6 },
{ "week": "W13", "net": 10 },
{ "week": "W14", "net": 12 }
],
"x": "week",
"y": "net",
"mark": "bar",
"showValue": true,
"format": "signed",
"style": { "maxWidth": 220 }
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Area fill, full width
import { Sparkline } from "insightcharts";
const data = [
{ month: 1, signups: 18 },
{ month: 2, signups: 22 },
{ month: 3, signups: 21 },
{ month: 4, signups: 27 },
{ month: 5, signups: 33 },
{ month: 6, signups: 31 },
{ month: 7, signups: 38 },
{ month: 8, signups: 44 },
{ month: 9, signups: 43 },
{ month: 10, signups: 52 },
{ month: 11, signups: 61 },
{ month: 12, signups: 66 },
];
export function Example() {
return (
<Sparkline data={data} y="signups" area height={56} />
);
}{
"type": "sparkline",
"data": [
{ "month": 1, "signups": 18 },
{ "month": 2, "signups": 22 },
{ "month": 3, "signups": 21 },
{ "month": 4, "signups": 27 },
{ "month": 5, "signups": 33 },
{ "month": 6, "signups": 31 },
{ "month": 7, "signups": 38 },
{ "month": 8, "signups": 44 },
{ "month": 9, "signups": 43 },
{ "month": 10, "signups": 52 },
{ "month": 11, "signups": 61 },
{ "month": 12, "signups": 66 }
],
"y": "signups",
"area": true,
"height": 56
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: 400 points in 160px
import { Sparkline } from "insightcharts";
const data = [
{ day: 1, price: 99.86 },
{ day: 2, price: 99.76 },
{ day: 3, price: 99.17 },
{ day: 4, price: 98.87 },
{ day: 5, price: 98.87 },
{ day: 6, price: 100.1 },
{ day: 7, price: 101.27 },
{ day: 8, price: 100.87 },
{ day: 9, price: 100.76 },
{ day: 10, price: 101.65 },
{ day: 11, price: 100.77 },
{ day: 12, price: 100.35 },
{ day: 13, price: 100.75 },
{ day: 14, price: 100.33 },
{ day: 15, price: 99.18 },
{ day: 16, price: 100.49 },
{ day: 17, price: 99.67 },
{ day: 18, price: 99.89 },
{ day: 19, price: 100.92 },
{ day: 20, price: 99.64 },
{ day: 21, price: 99.67 },
{ day: 22, price: 98.92 },
{ day: 23, price: 99.13 },
{ day: 24, price: 99.08 },
{ day: 25, price: 97.94 },
{ day: 26, price: 98.5 },
{ day: 27, price: 99.48 },
{ day: 28, price: 100.73 },
{ day: 29, price: 101.24 },
{ day: 30, price: 101.57 },
{ day: 31, price: 100.68 },
{ day: 32, price: 100.23 },
{ day: 33, price: 99.94 },
{ day: 34, price: 99.43 },
{ day: 35, price: 99.9 },
{ day: 36, price: 99.74 },
{ day: 37, price: 99.46 },
{ day: 38, price: 100.8 },
{ day: 39, price: 101.11 },
{ day: 40, price: 101.93 },
{ day: 41, price: 101.43 },
{ day: 42, price: 102.59 },
{ day: 43, price: 103.91 },
{ day: 44, price: 104.86 },
{ day: 45, price: 105.34 },
{ day: 46, price: 104.28 },
{ day: 47, price: 104.26 },
{ day: 48, price: 102.99 },
{ day: 49, price: 101.86 },
{ day: 50, price: 102.59 },
{ day: 51, price: 102.33 },
{ day: 52, price: 103.24 },
{ day: 53, price: 102.64 },
{ day: 54, price: 101.85 },
{ day: 55, price: 102.38 },
{ day: 56, price: 103.47 },
{ day: 57, price: 102.14 },
{ day: 58, price: 100.77 },
{ day: 59, price: 99.69 },
{ day: 60, price: 98.89 },
{ day: 61, price: 99.25 },
{ day: 62, price: 100.07 },
{ day: 63, price: 99.45 },
{ day: 64, price: 100.92 },
{ day: 65, price: 100.12 },
{ day: 66, price: 101.38 },
{ day: 67, price: 102.86 },
{ day: 68, price: 102.18 },
{ day: 69, price: 101.48 },
{ day: 70, price: 100.07 },
{ day: 71, price: 98.89 },
{ day: 72, price: 99.73 },
{ day: 73, price: 100.75 },
{ day: 74, price: 101.47 },
{ day: 75, price: 101.27 },
{ day: 76, price: 100.78 },
{ day: 77, price: 100.01 },
{ day: 78, price: 99.98 },
{ day: 79, price: 100.9 },
{ day: 80, price: 100.21 },
{ day: 81, price: 99.9 },
{ day: 82, price: 98.95 },
{ day: 83, price: 99.18 },
{ day: 84, price: 98.93 },
{ day: 85, price: 97.65 },
{ day: 86, price: 97.88 },
{ day: 87, price: 99.17 },
{ day: 88, price: 98.81 },
{ day: 89, price: 98.61 },
{ day: 90, price: 99.37 },
{ day: 91, price: 98.94 },
{ day: 92, price: 98.09 },
{ day: 93, price: 98.75 },
{ day: 94, price: 99.81 },
{ day: 95, price: 100.1 },
{ day: 96, price: 101.47 },
{ day: 97, price: 101.41 },
{ day: 98, price: 100.12 },
{ day: 99, price: 100.73 },
{ day: 100, price: 99.3 },
{ day: 101, price: 99.9 },
{ day: 102, price: 98.55 },
{ day: 103, price: 99.23 },
{ day: 104, price: 99.73 },
{ day: 105, price: 99.09 },
{ day: 106, price: 99.18 },
{ day: 107, price: 100.28 },
{ day: 108, price: 99.52 },
{ day: 109, price: 99.85 },
{ day: 110, price: 99.75 },
{ day: 111, price: 99.71 },
{ day: 112, price: 100.15 },
{ day: 113, price: 101.45 },
{ day: 114, price: 100.06 },
{ day: 115, price: 100.83 },
{ day: 116, price: 100.61 },
{ day: 117, price: 101.4 },
{ day: 118, price: 101.78 },
{ day: 119, price: 102.76 },
{ day: 120, price: 103.06 },
{ day: 121, price: 103.59 },
{ day: 122, price: 104.65 },
{ day: 123, price: 104.62 },
{ day: 124, price: 105.73 },
{ day: 125, price: 105.52 },
{ day: 126, price: 104.26 },
{ day: 127, price: 103.41 },
{ day: 128, price: 102.7 },
{ day: 129, price: 103.22 },
{ day: 130, price: 101.99 },
{ day: 131, price: 102.75 },
{ day: 132, price: 102.53 },
{ day: 133, price: 103.98 },
{ day: 134, price: 103.42 },
{ day: 135, price: 103.81 },
{ day: 136, price: 103.65 },
{ day: 137, price: 102.54 },
{ day: 138, price: 102.09 },
{ day: 139, price: 102.36 },
{ day: 140, price: 101.57 },
{ day: 141, price: 101.42 },
{ day: 142, price: 100.18 },
{ day: 143, price: 99.3 },
{ day: 144, price: 100.47 },
{ day: 145, price: 101.97 },
{ day: 146, price: 102.38 },
{ day: 147, price: 103.63 },
{ day: 148, price: 103.54 },
{ day: 149, price: 103.69 },
{ day: 150, price: 103.16 },
{ day: 151, price: 102.9 },
{ day: 152, price: 101.91 },
{ day: 153, price: 101.35 },
{ day: 154, price: 101.91 },
{ day: 155, price: 101.91 },
{ day: 156, price: 102.3 },
{ day: 157, price: 100.98 },
{ day: 158, price: 102 },
{ day: 159, price: 102.66 },
{ day: 160, price: 102.5 },
{ day: 161, price: 103.56 },
{ day: 162, price: 103.92 },
{ day: 163, price: 104.8 },
{ day: 164, price: 105.77 },
{ day: 165, price: 105.13 },
{ day: 166, price: 104.75 },
{ day: 167, price: 104.91 },
{ day: 168, price: 105.79 },
{ day: 169, price: 107 },
{ day: 170, price: 106.2 },
{ day: 171, price: 106.51 },
{ day: 172, price: 107.25 },
{ day: 173, price: 107.79 },
{ day: 174, price: 108.45 },
{ day: 175, price: 107.89 },
{ day: 176, price: 108.63 },
{ day: 177, price: 109.5 },
{ day: 178, price: 108.65 },
{ day: 179, price: 109.07 },
{ day: 180, price: 110.31 },
{ day: 181, price: 110.96 },
{ day: 182, price: 111.81 },
{ day: 183, price: 111.87 },
{ day: 184, price: 113.28 },
{ day: 185, price: 113.55 },
{ day: 186, price: 112.45 },
{ day: 187, price: 113.28 },
{ day: 188, price: 114.43 },
{ day: 189, price: 113.52 },
{ day: 190, price: 114.9 },
{ day: 191, price: 113.9 },
{ day: 192, price: 114.32 },
{ day: 193, price: 114.58 },
{ day: 194, price: 115.66 },
{ day: 195, price: 115.93 },
{ day: 196, price: 116.22 },
{ day: 197, price: 115.14 },
{ day: 198, price: 116.22 },
{ day: 199, price: 115.8 },
{ day: 200, price: 115.91 },
{ day: 201, price: 117.19 },
{ day: 202, price: 118.16 },
{ day: 203, price: 118.44 },
{ day: 204, price: 118.32 },
{ day: 205, price: 118.51 },
{ day: 206, price: 119.01 },
{ day: 207, price: 117.98 },
{ day: 208, price: 118.18 },
{ day: 209, price: 119.07 },
{ day: 210, price: 120.03 },
{ day: 211, price: 120.59 },
{ day: 212, price: 121.5 },
{ day: 213, price: 121.88 },
{ day: 214, price: 120.94 },
{ day: 215, price: 120.88 },
{ day: 216, price: 119.97 },
{ day: 217, price: 119.83 },
{ day: 218, price: 119.61 },
{ day: 219, price: 118.86 },
{ day: 220, price: 119.85 },
{ day: 221, price: 120.28 },
{ day: 222, price: 120.55 },
{ day: 223, price: 119.83 },
{ day: 224, price: 118.72 },
{ day: 225, price: 120 },
{ day: 226, price: 120.41 },
{ day: 227, price: 120.72 },
{ day: 228, price: 121.9 },
{ day: 229, price: 121.89 },
{ day: 230, price: 121.63 },
{ day: 231, price: 121.12 },
{ day: 232, price: 119.95 },
{ day: 233, price: 121.12 },
{ day: 234, price: 121.6 },
{ day: 235, price: 121.55 },
{ day: 236, price: 120.51 },
{ day: 237, price: 119.13 },
{ day: 238, price: 118.62 },
{ day: 239, price: 117.22 },
{ day: 240, price: 116 },
{ day: 241, price: 115.82 },
{ day: 242, price: 114.97 },
{ day: 243, price: 115.05 },
{ day: 244, price: 114.7 },
{ day: 245, price: 114.38 },
{ day: 246, price: 113.18 },
{ day: 247, price: 112.08 },
{ day: 248, price: 111.33 },
{ day: 249, price: 110.08 },
{ day: 250, price: 111.6 },
{ day: 251, price: 111.84 },
{ day: 252, price: 112.44 },
{ day: 253, price: 112.31 },
{ day: 254, price: 113.15 },
{ day: 255, price: 113.54 },
{ day: 256, price: 113.39 },
{ day: 257, price: 112.81 },
{ day: 258, price: 111.73 },
{ day: 259, price: 113.09 },
{ day: 260, price: 113.99 },
{ day: 261, price: 112.85 },
{ day: 262, price: 112.94 },
{ day: 263, price: 112.65 },
{ day: 264, price: 112.89 },
{ day: 265, price: 113.55 },
{ day: 266, price: 114.19 },
{ day: 267, price: 114.38 },
{ day: 268, price: 113.72 },
{ day: 269, price: 114.63 },
{ day: 270, price: 113.58 },
{ day: 271, price: 113.93 },
{ day: 272, price: 115.23 },
{ day: 273, price: 114.97 },
{ day: 274, price: 116 },
{ day: 275, price: 117.54 },
{ day: 276, price: 118.7 },
{ day: 277, price: 119.25 },
{ day: 278, price: 117.93 },
{ day: 279, price: 118.5 },
{ day: 280, price: 118.02 },
{ day: 281, price: 118.82 },
{ day: 282, price: 119.22 },
{ day: 283, price: 119.84 },
{ day: 284, price: 119.72 },
{ day: 285, price: 120.62 },
{ day: 286, price: 120.45 },
{ day: 287, price: 120.19 },
{ day: 288, price: 120 },
{ day: 289, price: 118.57 },
{ day: 290, price: 117.49 },
{ day: 291, price: 116.2 },
{ day: 292, price: 116.31 },
{ day: 293, price: 115.2 },
{ day: 294, price: 116.17 },
{ day: 295, price: 116.4 },
{ day: 296, price: 116.5 },
{ day: 297, price: 117.37 },
{ day: 298, price: 116.39 },
{ day: 299, price: 116.92 },
{ day: 300, price: 116.13 },
{ day: 301, price: 115.55 },
{ day: 302, price: 115.66 },
{ day: 303, price: 114.72 },
{ day: 304, price: 116.25 },
{ day: 305, price: 116.64 },
{ day: 306, price: 116.67 },
{ day: 307, price: 116.51 },
{ day: 308, price: 115.7 },
{ day: 309, price: 115.29 },
{ day: 310, price: 113.96 },
{ day: 311, price: 112.8 },
{ day: 312, price: 112.75 },
{ day: 313, price: 112.97 },
{ day: 314, price: 113.72 },
{ day: 315, price: 112.77 },
{ day: 316, price: 112.21 },
{ day: 317, price: 111.98 },
{ day: 318, price: 111.05 },
{ day: 319, price: 112.14 },
{ day: 320, price: 112.18 },
{ day: 321, price: 112.32 },
{ day: 322, price: 112.16 },
{ day: 323, price: 111.49 },
{ day: 324, price: 111.87 },
{ day: 325, price: 112.36 },
{ day: 326, price: 113.08 },
{ day: 327, price: 113.25 },
{ day: 328, price: 112.26 },
{ day: 329, price: 111.38 },
{ day: 330, price: 112.54 },
{ day: 331, price: 111.63 },
{ day: 332, price: 112.53 },
{ day: 333, price: 111.39 },
{ day: 334, price: 110.19 },
{ day: 335, price: 109.83 },
{ day: 336, price: 110.72 },
{ day: 337, price: 111.14 },
{ day: 338, price: 110.38 },
{ day: 339, price: 111.45 },
{ day: 340, price: 110.8 },
{ day: 341, price: 110.49 },
{ day: 342, price: 109.63 },
{ day: 343, price: 109.16 },
{ day: 344, price: 109.19 },
{ day: 345, price: 109.37 },
{ day: 346, price: 108.15 },
{ day: 347, price: 107.24 },
{ day: 348, price: 108.61 },
{ day: 349, price: 109.23 },
{ day: 350, price: 108.39 },
{ day: 351, price: 107.94 },
{ day: 352, price: 107.09 },
{ day: 353, price: 105.87 },
{ day: 354, price: 105.22 },
{ day: 355, price: 106.49 },
{ day: 356, price: 107.47 },
{ day: 357, price: 108.75 },
{ day: 358, price: 109.77 },
{ day: 359, price: 108.44 },
{ day: 360, price: 107.12 },
{ day: 361, price: 106.85 },
{ day: 362, price: 107.68 },
{ day: 363, price: 108.88 },
{ day: 364, price: 109.47 },
{ day: 365, price: 108.4 },
{ day: 366, price: 109.2 },
{ day: 367, price: 107.94 },
{ day: 368, price: 106.94 },
{ day: 369, price: 107.21 },
{ day: 370, price: 107.55 },
{ day: 371, price: 106.64 },
{ day: 372, price: 108.08 },
{ day: 373, price: 109.21 },
{ day: 374, price: 110.56 },
{ day: 375, price: 110.01 },
{ day: 376, price: 109.45 },
{ day: 377, price: 110.93 },
{ day: 378, price: 111.77 },
{ day: 379, price: 110.87 },
{ day: 380, price: 110.15 },
{ day: 381, price: 110.08 },
{ day: 382, price: 111.02 },
{ day: 383, price: 111 },
{ day: 384, price: 111.25 },
{ day: 385, price: 111.41 },
{ day: 386, price: 111.39 },
{ day: 387, price: 110.66 },
{ day: 388, price: 110.56 },
{ day: 389, price: 111.19 },
{ day: 390, price: 111.39 },
{ day: 391, price: 111.75 },
{ day: 392, price: 110.46 },
{ day: 393, price: 111.8 },
{ day: 394, price: 111.53 },
{ day: 395, price: 112.67 },
{ day: 396, price: 112.35 },
{ day: 397, price: 113.67 },
{ day: 398, price: 113.83 },
{ day: 399, price: 112.68 },
{ day: 400, price: 113.31 },
];
export function Example() {
return (
<Sparkline
data={data}
x="day"
y="price"
extremes
showValue
format="decimal:0"
style={{ maxWidth: 160 }}
/>
);
}{
"type": "sparkline",
"data": [
{ "day": 1, "price": 99.86 },
{ "day": 2, "price": 99.76 },
{ "day": 3, "price": 99.17 },
{ "day": 4, "price": 98.87 },
{ "day": 5, "price": 98.87 },
{ "day": 6, "price": 100.1 },
{ "day": 7, "price": 101.27 },
{ "day": 8, "price": 100.87 },
{ "day": 9, "price": 100.76 },
{ "day": 10, "price": 101.65 },
{ "day": 11, "price": 100.77 },
{ "day": 12, "price": 100.35 },
{ "day": 13, "price": 100.75 },
{ "day": 14, "price": 100.33 },
{ "day": 15, "price": 99.18 },
{ "day": 16, "price": 100.49 },
{ "day": 17, "price": 99.67 },
{ "day": 18, "price": 99.89 },
{ "day": 19, "price": 100.92 },
{ "day": 20, "price": 99.64 },
{ "day": 21, "price": 99.67 },
{ "day": 22, "price": 98.92 },
{ "day": 23, "price": 99.13 },
{ "day": 24, "price": 99.08 },
{ "day": 25, "price": 97.94 },
{ "day": 26, "price": 98.5 },
{ "day": 27, "price": 99.48 },
{ "day": 28, "price": 100.73 },
{ "day": 29, "price": 101.24 },
{ "day": 30, "price": 101.57 },
{ "day": 31, "price": 100.68 },
{ "day": 32, "price": 100.23 },
{ "day": 33, "price": 99.94 },
{ "day": 34, "price": 99.43 },
{ "day": 35, "price": 99.9 },
{ "day": 36, "price": 99.74 },
{ "day": 37, "price": 99.46 },
{ "day": 38, "price": 100.8 },
{ "day": 39, "price": 101.11 },
{ "day": 40, "price": 101.93 },
{ "day": 41, "price": 101.43 },
{ "day": 42, "price": 102.59 },
{ "day": 43, "price": 103.91 },
{ "day": 44, "price": 104.86 },
{ "day": 45, "price": 105.34 },
{ "day": 46, "price": 104.28 },
{ "day": 47, "price": 104.26 },
{ "day": 48, "price": 102.99 },
{ "day": 49, "price": 101.86 },
{ "day": 50, "price": 102.59 },
{ "day": 51, "price": 102.33 },
{ "day": 52, "price": 103.24 },
{ "day": 53, "price": 102.64 },
{ "day": 54, "price": 101.85 },
{ "day": 55, "price": 102.38 },
{ "day": 56, "price": 103.47 },
{ "day": 57, "price": 102.14 },
{ "day": 58, "price": 100.77 },
{ "day": 59, "price": 99.69 },
{ "day": 60, "price": 98.89 },
{ "day": 61, "price": 99.25 },
{ "day": 62, "price": 100.07 },
{ "day": 63, "price": 99.45 },
{ "day": 64, "price": 100.92 },
{ "day": 65, "price": 100.12 },
{ "day": 66, "price": 101.38 },
{ "day": 67, "price": 102.86 },
{ "day": 68, "price": 102.18 },
{ "day": 69, "price": 101.48 },
{ "day": 70, "price": 100.07 },
{ "day": 71, "price": 98.89 },
{ "day": 72, "price": 99.73 },
{ "day": 73, "price": 100.75 },
{ "day": 74, "price": 101.47 },
{ "day": 75, "price": 101.27 },
{ "day": 76, "price": 100.78 },
{ "day": 77, "price": 100.01 },
{ "day": 78, "price": 99.98 },
{ "day": 79, "price": 100.9 },
{ "day": 80, "price": 100.21 },
{ "day": 81, "price": 99.9 },
{ "day": 82, "price": 98.95 },
{ "day": 83, "price": 99.18 },
{ "day": 84, "price": 98.93 },
{ "day": 85, "price": 97.65 },
{ "day": 86, "price": 97.88 },
{ "day": 87, "price": 99.17 },
{ "day": 88, "price": 98.81 },
{ "day": 89, "price": 98.61 },
{ "day": 90, "price": 99.37 },
{ "day": 91, "price": 98.94 },
{ "day": 92, "price": 98.09 },
{ "day": 93, "price": 98.75 },
{ "day": 94, "price": 99.81 },
{ "day": 95, "price": 100.1 },
{ "day": 96, "price": 101.47 },
{ "day": 97, "price": 101.41 },
{ "day": 98, "price": 100.12 },
{ "day": 99, "price": 100.73 },
{ "day": 100, "price": 99.3 },
{ "day": 101, "price": 99.9 },
{ "day": 102, "price": 98.55 },
{ "day": 103, "price": 99.23 },
{ "day": 104, "price": 99.73 },
{ "day": 105, "price": 99.09 },
{ "day": 106, "price": 99.18 },
{ "day": 107, "price": 100.28 },
{ "day": 108, "price": 99.52 },
{ "day": 109, "price": 99.85 },
{ "day": 110, "price": 99.75 },
{ "day": 111, "price": 99.71 },
{ "day": 112, "price": 100.15 },
{ "day": 113, "price": 101.45 },
{ "day": 114, "price": 100.06 },
{ "day": 115, "price": 100.83 },
{ "day": 116, "price": 100.61 },
{ "day": 117, "price": 101.4 },
{ "day": 118, "price": 101.78 },
{ "day": 119, "price": 102.76 },
{ "day": 120, "price": 103.06 },
{ "day": 121, "price": 103.59 },
{ "day": 122, "price": 104.65 },
{ "day": 123, "price": 104.62 },
{ "day": 124, "price": 105.73 },
{ "day": 125, "price": 105.52 },
{ "day": 126, "price": 104.26 },
{ "day": 127, "price": 103.41 },
{ "day": 128, "price": 102.7 },
{ "day": 129, "price": 103.22 },
{ "day": 130, "price": 101.99 },
{ "day": 131, "price": 102.75 },
{ "day": 132, "price": 102.53 },
{ "day": 133, "price": 103.98 },
{ "day": 134, "price": 103.42 },
{ "day": 135, "price": 103.81 },
{ "day": 136, "price": 103.65 },
{ "day": 137, "price": 102.54 },
{ "day": 138, "price": 102.09 },
{ "day": 139, "price": 102.36 },
{ "day": 140, "price": 101.57 },
{ "day": 141, "price": 101.42 },
{ "day": 142, "price": 100.18 },
{ "day": 143, "price": 99.3 },
{ "day": 144, "price": 100.47 },
{ "day": 145, "price": 101.97 },
{ "day": 146, "price": 102.38 },
{ "day": 147, "price": 103.63 },
{ "day": 148, "price": 103.54 },
{ "day": 149, "price": 103.69 },
{ "day": 150, "price": 103.16 },
{ "day": 151, "price": 102.9 },
{ "day": 152, "price": 101.91 },
{ "day": 153, "price": 101.35 },
{ "day": 154, "price": 101.91 },
{ "day": 155, "price": 101.91 },
{ "day": 156, "price": 102.3 },
{ "day": 157, "price": 100.98 },
{ "day": 158, "price": 102 },
{ "day": 159, "price": 102.66 },
{ "day": 160, "price": 102.5 },
{ "day": 161, "price": 103.56 },
{ "day": 162, "price": 103.92 },
{ "day": 163, "price": 104.8 },
{ "day": 164, "price": 105.77 },
{ "day": 165, "price": 105.13 },
{ "day": 166, "price": 104.75 },
{ "day": 167, "price": 104.91 },
{ "day": 168, "price": 105.79 },
{ "day": 169, "price": 107 },
{ "day": 170, "price": 106.2 },
{ "day": 171, "price": 106.51 },
{ "day": 172, "price": 107.25 },
{ "day": 173, "price": 107.79 },
{ "day": 174, "price": 108.45 },
{ "day": 175, "price": 107.89 },
{ "day": 176, "price": 108.63 },
{ "day": 177, "price": 109.5 },
{ "day": 178, "price": 108.65 },
{ "day": 179, "price": 109.07 },
{ "day": 180, "price": 110.31 },
{ "day": 181, "price": 110.96 },
{ "day": 182, "price": 111.81 },
{ "day": 183, "price": 111.87 },
{ "day": 184, "price": 113.28 },
{ "day": 185, "price": 113.55 },
{ "day": 186, "price": 112.45 },
{ "day": 187, "price": 113.28 },
{ "day": 188, "price": 114.43 },
{ "day": 189, "price": 113.52 },
{ "day": 190, "price": 114.9 },
{ "day": 191, "price": 113.9 },
{ "day": 192, "price": 114.32 },
{ "day": 193, "price": 114.58 },
{ "day": 194, "price": 115.66 },
{ "day": 195, "price": 115.93 },
{ "day": 196, "price": 116.22 },
{ "day": 197, "price": 115.14 },
{ "day": 198, "price": 116.22 },
{ "day": 199, "price": 115.8 },
{ "day": 200, "price": 115.91 },
{ "day": 201, "price": 117.19 },
{ "day": 202, "price": 118.16 },
{ "day": 203, "price": 118.44 },
{ "day": 204, "price": 118.32 },
{ "day": 205, "price": 118.51 },
{ "day": 206, "price": 119.01 },
{ "day": 207, "price": 117.98 },
{ "day": 208, "price": 118.18 },
{ "day": 209, "price": 119.07 },
{ "day": 210, "price": 120.03 },
{ "day": 211, "price": 120.59 },
{ "day": 212, "price": 121.5 },
{ "day": 213, "price": 121.88 },
{ "day": 214, "price": 120.94 },
{ "day": 215, "price": 120.88 },
{ "day": 216, "price": 119.97 },
{ "day": 217, "price": 119.83 },
{ "day": 218, "price": 119.61 },
{ "day": 219, "price": 118.86 },
{ "day": 220, "price": 119.85 },
{ "day": 221, "price": 120.28 },
{ "day": 222, "price": 120.55 },
{ "day": 223, "price": 119.83 },
{ "day": 224, "price": 118.72 },
{ "day": 225, "price": 120 },
{ "day": 226, "price": 120.41 },
{ "day": 227, "price": 120.72 },
{ "day": 228, "price": 121.9 },
{ "day": 229, "price": 121.89 },
{ "day": 230, "price": 121.63 },
{ "day": 231, "price": 121.12 },
{ "day": 232, "price": 119.95 },
{ "day": 233, "price": 121.12 },
{ "day": 234, "price": 121.6 },
{ "day": 235, "price": 121.55 },
{ "day": 236, "price": 120.51 },
{ "day": 237, "price": 119.13 },
{ "day": 238, "price": 118.62 },
{ "day": 239, "price": 117.22 },
{ "day": 240, "price": 116 },
{ "day": 241, "price": 115.82 },
{ "day": 242, "price": 114.97 },
{ "day": 243, "price": 115.05 },
{ "day": 244, "price": 114.7 },
{ "day": 245, "price": 114.38 },
{ "day": 246, "price": 113.18 },
{ "day": 247, "price": 112.08 },
{ "day": 248, "price": 111.33 },
{ "day": 249, "price": 110.08 },
{ "day": 250, "price": 111.6 },
{ "day": 251, "price": 111.84 },
{ "day": 252, "price": 112.44 },
{ "day": 253, "price": 112.31 },
{ "day": 254, "price": 113.15 },
{ "day": 255, "price": 113.54 },
{ "day": 256, "price": 113.39 },
{ "day": 257, "price": 112.81 },
{ "day": 258, "price": 111.73 },
{ "day": 259, "price": 113.09 },
{ "day": 260, "price": 113.99 },
{ "day": 261, "price": 112.85 },
{ "day": 262, "price": 112.94 },
{ "day": 263, "price": 112.65 },
{ "day": 264, "price": 112.89 },
{ "day": 265, "price": 113.55 },
{ "day": 266, "price": 114.19 },
{ "day": 267, "price": 114.38 },
{ "day": 268, "price": 113.72 },
{ "day": 269, "price": 114.63 },
{ "day": 270, "price": 113.58 },
{ "day": 271, "price": 113.93 },
{ "day": 272, "price": 115.23 },
{ "day": 273, "price": 114.97 },
{ "day": 274, "price": 116 },
{ "day": 275, "price": 117.54 },
{ "day": 276, "price": 118.7 },
{ "day": 277, "price": 119.25 },
{ "day": 278, "price": 117.93 },
{ "day": 279, "price": 118.5 },
{ "day": 280, "price": 118.02 },
{ "day": 281, "price": 118.82 },
{ "day": 282, "price": 119.22 },
{ "day": 283, "price": 119.84 },
{ "day": 284, "price": 119.72 },
{ "day": 285, "price": 120.62 },
{ "day": 286, "price": 120.45 },
{ "day": 287, "price": 120.19 },
{ "day": 288, "price": 120 },
{ "day": 289, "price": 118.57 },
{ "day": 290, "price": 117.49 },
{ "day": 291, "price": 116.2 },
{ "day": 292, "price": 116.31 },
{ "day": 293, "price": 115.2 },
{ "day": 294, "price": 116.17 },
{ "day": 295, "price": 116.4 },
{ "day": 296, "price": 116.5 },
{ "day": 297, "price": 117.37 },
{ "day": 298, "price": 116.39 },
{ "day": 299, "price": 116.92 },
{ "day": 300, "price": 116.13 },
{ "day": 301, "price": 115.55 },
{ "day": 302, "price": 115.66 },
{ "day": 303, "price": 114.72 },
{ "day": 304, "price": 116.25 },
{ "day": 305, "price": 116.64 },
{ "day": 306, "price": 116.67 },
{ "day": 307, "price": 116.51 },
{ "day": 308, "price": 115.7 },
{ "day": 309, "price": 115.29 },
{ "day": 310, "price": 113.96 },
{ "day": 311, "price": 112.8 },
{ "day": 312, "price": 112.75 },
{ "day": 313, "price": 112.97 },
{ "day": 314, "price": 113.72 },
{ "day": 315, "price": 112.77 },
{ "day": 316, "price": 112.21 },
{ "day": 317, "price": 111.98 },
{ "day": 318, "price": 111.05 },
{ "day": 319, "price": 112.14 },
{ "day": 320, "price": 112.18 },
{ "day": 321, "price": 112.32 },
{ "day": 322, "price": 112.16 },
{ "day": 323, "price": 111.49 },
{ "day": 324, "price": 111.87 },
{ "day": 325, "price": 112.36 },
{ "day": 326, "price": 113.08 },
{ "day": 327, "price": 113.25 },
{ "day": 328, "price": 112.26 },
{ "day": 329, "price": 111.38 },
{ "day": 330, "price": 112.54 },
{ "day": 331, "price": 111.63 },
{ "day": 332, "price": 112.53 },
{ "day": 333, "price": 111.39 },
{ "day": 334, "price": 110.19 },
{ "day": 335, "price": 109.83 },
{ "day": 336, "price": 110.72 },
{ "day": 337, "price": 111.14 },
{ "day": 338, "price": 110.38 },
{ "day": 339, "price": 111.45 },
{ "day": 340, "price": 110.8 },
{ "day": 341, "price": 110.49 },
{ "day": 342, "price": 109.63 },
{ "day": 343, "price": 109.16 },
{ "day": 344, "price": 109.19 },
{ "day": 345, "price": 109.37 },
{ "day": 346, "price": 108.15 },
{ "day": 347, "price": 107.24 },
{ "day": 348, "price": 108.61 },
{ "day": 349, "price": 109.23 },
{ "day": 350, "price": 108.39 },
{ "day": 351, "price": 107.94 },
{ "day": 352, "price": 107.09 },
{ "day": 353, "price": 105.87 },
{ "day": 354, "price": 105.22 },
{ "day": 355, "price": 106.49 },
{ "day": 356, "price": 107.47 },
{ "day": 357, "price": 108.75 },
{ "day": 358, "price": 109.77 },
{ "day": 359, "price": 108.44 },
{ "day": 360, "price": 107.12 },
{ "day": 361, "price": 106.85 },
{ "day": 362, "price": 107.68 },
{ "day": 363, "price": 108.88 },
{ "day": 364, "price": 109.47 },
{ "day": 365, "price": 108.4 },
{ "day": 366, "price": 109.2 },
{ "day": 367, "price": 107.94 },
{ "day": 368, "price": 106.94 },
{ "day": 369, "price": 107.21 },
{ "day": 370, "price": 107.55 },
{ "day": 371, "price": 106.64 },
{ "day": 372, "price": 108.08 },
{ "day": 373, "price": 109.21 },
{ "day": 374, "price": 110.56 },
{ "day": 375, "price": 110.01 },
{ "day": 376, "price": 109.45 },
{ "day": 377, "price": 110.93 },
{ "day": 378, "price": 111.77 },
{ "day": 379, "price": 110.87 },
{ "day": 380, "price": 110.15 },
{ "day": 381, "price": 110.08 },
{ "day": 382, "price": 111.02 },
{ "day": 383, "price": 111 },
{ "day": 384, "price": 111.25 },
{ "day": 385, "price": 111.41 },
{ "day": 386, "price": 111.39 },
{ "day": 387, "price": 110.66 },
{ "day": 388, "price": 110.56 },
{ "day": 389, "price": 111.19 },
{ "day": 390, "price": 111.39 },
{ "day": 391, "price": 111.75 },
{ "day": 392, "price": 110.46 },
{ "day": 393, "price": 111.8 },
{ "day": 394, "price": 111.53 },
{ "day": 395, "price": 112.67 },
{ "day": 396, "price": 112.35 },
{ "day": 397, "price": 113.67 },
{ "day": 398, "price": 113.83 },
{ "day": 399, "price": 112.68 },
{ "day": 400, "price": 113.31 }
],
"x": "day",
"y": "price",
"extremes": true,
"showValue": true,
"format": "decimal:0",
"style": { "maxWidth": 160 }
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| yrequired | string | Value field. | |
| x | string | Time or label field, used in the tooltip and alt text. Rows are drawn in data order. | |
| mark | "line" | "bar" | "line" | Line for a trend, bars for discrete counts or gains and losses (negative bars take the negative colour). |
| extremes | boolean | false | Mark the lowest and highest points with small dots. |
| band | [number, number] | Shaded reference range in value units, e.g. a normal range. | |
| area | boolean | false | Light fill under the line; forces a zero baseline. |
| showValue | boolean | false | Print the last value after the line. |
| zero | boolean | Include zero in the scale. Default: off for lines, always on for bars. |
Common chart props 29
Every chart built with defineChart accepts these on top of its own props.
| Prop | Type | Description |
|---|---|---|
| data | DataInput | Rows, CSV text, a URL, { url, path }, an async function, or an Arrow-style table. Omit inside <InsightData>. |
| transform | Transform | Transform[] | A pipeline of transforms applied before drawing. |
| title | string | The title. One plain statement of what the data shows, with the number and the period ("Monthly churn fell from 4.2% to 2.1% in 2024"), or a plain label ("Monthly churn, 2024"). One clause, no figures of speech. |
| subtitle | string | Measure, unit, population, period. |
| source | string | Data source, shown as "Source: ...". |
| note | string | Method notes or caveats. |
| height | number | string | CSS height of the plot. Default 360. |
| aspect | number | Width / height. Overrides height. |
| highlight | string | string[] | The entity (or entities) the title is about. Every other series is drawn in grey. |
| annotations | Annotation[] | Reference lines, shaded bands and callouts, in data coordinates. |
| format | FormatSpec | How to print values: "compact", "percent", "currency:USD", "{value} kg", Intl options, or a function. |
| legend | boolean | Show the legend. Default: shown when there are two or more series. |
| select | boolean | string | Make marks clickable to filter. Inside <InsightData> the selection filters every other chart. Pass a field name, or true to use the chart's category field. |
| onSelect | (values: string[], field: string) => void | Called with the selected values whenever the selection changes. |
| option | EChartsOption | ((option: EChartsOption, ctx: BuildContext) => EChartsOption) | Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers. |
| theme | ThemeInput | A theme, or a partial set of tokens merged over the surrounding theme, for this chart only. |
| mode | ModeInput | "auto" (default) follows the page, "system" follows the OS, or force "light" / "dark". |
| renderer | RendererInput | "auto" (default) uses SVG for light charts and canvas for heavy ones. |
| animate | boolean | Set false to disable animation. Reduced-motion preferences are always respected. |
| lazy | boolean | Mount the chart only when it scrolls near the viewport. Default true. |
| group | string | Link tooltips with other charts sharing this group id. |
| exportable | boolean | ExportFormat[] | Show an export menu: true or a list of formats from png, jpeg, svg, pdf, csv, json. |
| table | boolean | Show a collapsible "View data" table under the chart. |
| alt | string | Accessible description: the chart type and measures, then the main pattern and the notable values. |
| id | string | Stable id for this chart's selection in the shared store. |
| onEvents | Record<string, ChartEventHandler> | ECharts event handlers, e.g. { click: (params, chart) => {} }. Prefix a name with zr: to bind to the canvas itself. |
| onReady | (chart: EChartsInstance) => void | Called with the ECharts instance once it is created. |
| className | string | Class name for the outer <figure>. |
| style | CSSProperties | Inline style for the outer <figure>. |