A chart with a callout beside it that states the main fact. In narrow containers the callout goes underneath.
Line chart
Shows how one or more values change over time or another ordered dimension.
- Use when
- Trends over time with roughly 5 or more points; comparing the trajectories of a few series; one highlighted series against many context series.
- Avoid when
- Unordered categories (use bar chart); only two time points (use slope chart); more than about 6 equally important lines (use small multiples).
Preview
Solar's share rose from 2.7% to 5.5% between 2019 and 2023
import { LineChart } from "insightcharts";
const data = [
{ year: "2019", solar: 2.7, wind: 5.3 },
{ year: "2020", solar: 3.2, wind: 5.9 },
{ year: "2021", solar: 3.7, wind: 6.5 },
{ year: "2022", solar: 4.6, wind: 7.3 },
{ year: "2023", solar: 5.5, wind: 7.8 },
];
export function Example() {
return (
<LineChart
data={data}
x="year"
y={["solar", "wind"]}
format={"{value}%"}
title="Solar's share rose from 2.7% to 5.5% between 2019 and 2023"
/>
);
}{
"type": "line-chart",
"data": [
{ "year": "2019", "solar": 2.7, "wind": 5.3 },
{ "year": "2020", "solar": 3.2, "wind": 5.9 },
{ "year": "2021", "solar": 3.7, "wind": 6.5 },
{ "year": "2022", "solar": 4.6, "wind": 7.3 },
{ "year": "2023", "solar": 5.5, "wind": 7.8 }
],
"x": "year",
"y": ["solar", "wind"],
"format": "{value}%",
"title": "Solar's share rose from 2.7% to 5.5% between 2019 and 2023"
}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 9 templates use line chart.
Molecules
5One chart frame with a segmented control that switches between several views of the same data, morphing between views that share a chart type.
The opening exhibit of a piece: kicker, headline and deck above one large chart, with a source line underneath.
Two to four charts over one shared dataset in a responsive grid: clicking a mark in one filters the others, with the active filters shown as removable chips.
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
9A 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.
Directly, and throughChart with callout
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.
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 throughChart with callout
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.
ThroughLinked charts
Installation
$ pnpm dlx shadcn@latest add @insightcharts/line-chartThe 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 { LineChart } from "insightcharts";Examples
Highlight with named context lines
Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024
Share of households with a mobile money account. `contextLabels: true` names the grey lines in muted type.
import { LineChart } from "insightcharts";
const data = [
{ year: "2015", city: "Lagos", share: 20.6 },
{ year: "2015", city: "Nairobi", share: 36 },
{ year: "2015", city: "Kampala", share: 13 },
{ year: "2015", city: "Addis", share: 6.6 },
{ year: "2016", city: "Lagos", share: 26.9 },
{ year: "2016", city: "Nairobi", share: 38.7 },
{ year: "2016", city: "Kampala", share: 16.6 },
{ year: "2016", city: "Addis", share: 14.5 },
{ year: "2017", city: "Lagos", share: 31.9 },
{ year: "2017", city: "Nairobi", share: 39.2 },
{ year: "2017", city: "Kampala", share: 17.9 },
{ year: "2017", city: "Addis", share: 21 },
{ year: "2018", city: "Lagos", share: 34.1 },
{ year: "2018", city: "Nairobi", share: 42.5 },
{ year: "2018", city: "Kampala", share: 22 },
{ year: "2018", city: "Addis", share: 24.7 },
{ year: "2019", city: "Lagos", share: 38.3 },
{ year: "2019", city: "Nairobi", share: 47.3 },
{ year: "2019", city: "Kampala", share: 27.6 },
{ year: "2019", city: "Addis", share: 30.4 },
{ year: "2020", city: "Lagos", share: 44.9 },
{ year: "2020", city: "Nairobi", share: 48.9 },
{ year: "2020", city: "Kampala", share: 30.1 },
{ year: "2020", city: "Addis", share: 38.5 },
{ year: "2021", city: "Lagos", share: 48.7 },
{ year: "2021", city: "Nairobi", share: 49.8 },
{ year: "2021", city: "Kampala", share: 31.8 },
{ year: "2021", city: "Addis", share: 43.9 },
{ year: "2022", city: "Lagos", share: 50.9 },
{ year: "2022", city: "Nairobi", share: 54.1 },
{ year: "2022", city: "Kampala", share: 37 },
{ year: "2022", city: "Addis", share: 47.7 },
{ year: "2023", city: "Lagos", share: 56.3 },
{ year: "2023", city: "Nairobi", share: 58.3 },
{ year: "2023", city: "Kampala", share: 41.9 },
{ year: "2023", city: "Addis", share: 54.6 },
{ year: "2024", city: "Lagos", share: 61 },
{ year: "2024", city: "Nairobi", share: 59.5 },
{ year: "2024", city: "Kampala", share: 44 },
{ year: "2024", city: "Addis", share: 60.8 },
];
export function Example() {
return (
<LineChart
data={data}
x="year"
y="share"
series="city"
highlight="Addis"
contextLabels
format={"{value}%"}
title="Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024"
subtitle="Share of households with a mobile money account. `contextLabels: true` names the grey lines in muted type."
note="Illustrative data"
/>
);
}{
"type": "line-chart",
"data": [
{ "year": "2015", "city": "Lagos", "share": 20.6 },
{ "year": "2015", "city": "Nairobi", "share": 36 },
{ "year": "2015", "city": "Kampala", "share": 13 },
{ "year": "2015", "city": "Addis", "share": 6.6 },
{ "year": "2016", "city": "Lagos", "share": 26.9 },
{ "year": "2016", "city": "Nairobi", "share": 38.7 },
{ "year": "2016", "city": "Kampala", "share": 16.6 },
{ "year": "2016", "city": "Addis", "share": 14.5 },
{ "year": "2017", "city": "Lagos", "share": 31.9 },
{ "year": "2017", "city": "Nairobi", "share": 39.2 },
{ "year": "2017", "city": "Kampala", "share": 17.9 },
{ "year": "2017", "city": "Addis", "share": 21 },
{ "year": "2018", "city": "Lagos", "share": 34.1 },
{ "year": "2018", "city": "Nairobi", "share": 42.5 },
{ "year": "2018", "city": "Kampala", "share": 22 },
{ "year": "2018", "city": "Addis", "share": 24.7 },
{ "year": "2019", "city": "Lagos", "share": 38.3 },
{ "year": "2019", "city": "Nairobi", "share": 47.3 },
{ "year": "2019", "city": "Kampala", "share": 27.6 },
{ "year": "2019", "city": "Addis", "share": 30.4 },
{ "year": "2020", "city": "Lagos", "share": 44.9 },
{ "year": "2020", "city": "Nairobi", "share": 48.9 },
{ "year": "2020", "city": "Kampala", "share": 30.1 },
{ "year": "2020", "city": "Addis", "share": 38.5 },
{ "year": "2021", "city": "Lagos", "share": 48.7 },
{ "year": "2021", "city": "Nairobi", "share": 49.8 },
{ "year": "2021", "city": "Kampala", "share": 31.8 },
{ "year": "2021", "city": "Addis", "share": 43.9 },
{ "year": "2022", "city": "Lagos", "share": 50.9 },
{ "year": "2022", "city": "Nairobi", "share": 54.1 },
{ "year": "2022", "city": "Kampala", "share": 37 },
{ "year": "2022", "city": "Addis", "share": 47.7 },
{ "year": "2023", "city": "Lagos", "share": 56.3 },
{ "year": "2023", "city": "Nairobi", "share": 58.3 },
{ "year": "2023", "city": "Kampala", "share": 41.9 },
{ "year": "2023", "city": "Addis", "share": 54.6 },
{ "year": "2024", "city": "Lagos", "share": 61 },
{ "year": "2024", "city": "Nairobi", "share": 59.5 },
{ "year": "2024", "city": "Kampala", "share": 44 },
{ "year": "2024", "city": "Addis", "share": 60.8 }
],
"x": "year",
"y": "share",
"series": "city",
"highlight": "Addis",
"contextLabels": true,
"format": "{value}%",
"title": "Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024",
"subtitle": "Share of households with a mobile money account. `contextLabels: true` names the grey lines in muted type.",
"note": "Illustrative data"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Highlight, one legend entry for the rest, annotations near the right edge
Addis reached the 60% national target in 2024
Households with a mobile money account
import { LineChart } from "insightcharts";
const data = [
{ year: "2015", city: "Lagos", share: 20.6 },
{ year: "2015", city: "Nairobi", share: 36 },
{ year: "2015", city: "Kampala", share: 13 },
{ year: "2015", city: "Addis", share: 6.6 },
{ year: "2016", city: "Lagos", share: 26.9 },
{ year: "2016", city: "Nairobi", share: 38.7 },
{ year: "2016", city: "Kampala", share: 16.6 },
{ year: "2016", city: "Addis", share: 14.5 },
{ year: "2017", city: "Lagos", share: 31.9 },
{ year: "2017", city: "Nairobi", share: 39.2 },
{ year: "2017", city: "Kampala", share: 17.9 },
{ year: "2017", city: "Addis", share: 21 },
{ year: "2018", city: "Lagos", share: 34.1 },
{ year: "2018", city: "Nairobi", share: 42.5 },
{ year: "2018", city: "Kampala", share: 22 },
{ year: "2018", city: "Addis", share: 24.7 },
{ year: "2019", city: "Lagos", share: 38.3 },
{ year: "2019", city: "Nairobi", share: 47.3 },
{ year: "2019", city: "Kampala", share: 27.6 },
{ year: "2019", city: "Addis", share: 30.4 },
{ year: "2020", city: "Lagos", share: 44.9 },
{ year: "2020", city: "Nairobi", share: 48.9 },
{ year: "2020", city: "Kampala", share: 30.1 },
{ year: "2020", city: "Addis", share: 38.5 },
{ year: "2021", city: "Lagos", share: 48.7 },
{ year: "2021", city: "Nairobi", share: 49.8 },
{ year: "2021", city: "Kampala", share: 31.8 },
{ year: "2021", city: "Addis", share: 43.9 },
{ year: "2022", city: "Lagos", share: 50.9 },
{ year: "2022", city: "Nairobi", share: 54.1 },
{ year: "2022", city: "Kampala", share: 37 },
{ year: "2022", city: "Addis", share: 47.7 },
{ year: "2023", city: "Lagos", share: 56.3 },
{ year: "2023", city: "Nairobi", share: 58.3 },
{ year: "2023", city: "Kampala", share: 41.9 },
{ year: "2023", city: "Addis", share: 54.6 },
{ year: "2024", city: "Lagos", share: 61 },
{ year: "2024", city: "Nairobi", share: 59.5 },
{ year: "2024", city: "Kampala", share: 44 },
{ year: "2024", city: "Addis", share: 60.8 },
];
export function Example() {
return (
<LineChart
data={data}
x="year"
y="share"
series="city"
highlight="Addis"
contextLabels="Other cities"
annotations={[
{ type: "line", axis: "y", value: 60, label: "National target" },
{
type: "point",
x: "2023",
y: 49.5,
label: "Agent network\nreaches every district",
},
]}
format={"{value}%"}
title="Addis reached the 60% national target in 2024"
subtitle="Households with a mobile money account"
note="Illustrative data"
/>
);
}{
"type": "line-chart",
"data": [
{ "year": "2015", "city": "Lagos", "share": 20.6 },
{ "year": "2015", "city": "Nairobi", "share": 36 },
{ "year": "2015", "city": "Kampala", "share": 13 },
{ "year": "2015", "city": "Addis", "share": 6.6 },
{ "year": "2016", "city": "Lagos", "share": 26.9 },
{ "year": "2016", "city": "Nairobi", "share": 38.7 },
{ "year": "2016", "city": "Kampala", "share": 16.6 },
{ "year": "2016", "city": "Addis", "share": 14.5 },
{ "year": "2017", "city": "Lagos", "share": 31.9 },
{ "year": "2017", "city": "Nairobi", "share": 39.2 },
{ "year": "2017", "city": "Kampala", "share": 17.9 },
{ "year": "2017", "city": "Addis", "share": 21 },
{ "year": "2018", "city": "Lagos", "share": 34.1 },
{ "year": "2018", "city": "Nairobi", "share": 42.5 },
{ "year": "2018", "city": "Kampala", "share": 22 },
{ "year": "2018", "city": "Addis", "share": 24.7 },
{ "year": "2019", "city": "Lagos", "share": 38.3 },
{ "year": "2019", "city": "Nairobi", "share": 47.3 },
{ "year": "2019", "city": "Kampala", "share": 27.6 },
{ "year": "2019", "city": "Addis", "share": 30.4 },
{ "year": "2020", "city": "Lagos", "share": 44.9 },
{ "year": "2020", "city": "Nairobi", "share": 48.9 },
{ "year": "2020", "city": "Kampala", "share": 30.1 },
{ "year": "2020", "city": "Addis", "share": 38.5 },
{ "year": "2021", "city": "Lagos", "share": 48.7 },
{ "year": "2021", "city": "Nairobi", "share": 49.8 },
{ "year": "2021", "city": "Kampala", "share": 31.8 },
{ "year": "2021", "city": "Addis", "share": 43.9 },
{ "year": "2022", "city": "Lagos", "share": 50.9 },
{ "year": "2022", "city": "Nairobi", "share": 54.1 },
{ "year": "2022", "city": "Kampala", "share": 37 },
{ "year": "2022", "city": "Addis", "share": 47.7 },
{ "year": "2023", "city": "Lagos", "share": 56.3 },
{ "year": "2023", "city": "Nairobi", "share": 58.3 },
{ "year": "2023", "city": "Kampala", "share": 41.9 },
{ "year": "2023", "city": "Addis", "share": 54.6 },
{ "year": "2024", "city": "Lagos", "share": 61 },
{ "year": "2024", "city": "Nairobi", "share": 59.5 },
{ "year": "2024", "city": "Kampala", "share": 44 },
{ "year": "2024", "city": "Addis", "share": 60.8 }
],
"x": "year",
"y": "share",
"series": "city",
"highlight": "Addis",
"contextLabels": "Other cities",
"annotations": [
{ "type": "line", "axis": "y", "value": 60, "label": "National target" },
{
"type": "point",
"x": "2023",
"y": 49.5,
"label": "Agent network\nreaches every district"
}
],
"format": "{value}%",
"title": "Addis reached the 60% national target in 2024",
"subtitle": "Households with a mobile money account",
"note": "Illustrative data"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: six lines converge
Five of six cities had between 58.8% and 61% of households using mobile money in 2024
Households with a mobile money account
import { LineChart } from "insightcharts";
const data = [
{
year: "2015",
Lagos: 20.6,
Nairobi: 36,
Accra: 26.6,
Dakar: 39.6,
Kampala: 13,
Addis: 6.6,
},
{
year: "2016",
Lagos: 26.9,
Nairobi: 38.7,
Accra: 32.2,
Dakar: 43.6,
Kampala: 16.6,
Addis: 14.5,
},
{
year: "2017",
Lagos: 31.9,
Nairobi: 39.2,
Accra: 36.4,
Dakar: 46.2,
Kampala: 17.9,
Addis: 21,
},
{
year: "2018",
Lagos: 34.1,
Nairobi: 42.5,
Accra: 37.8,
Dakar: 46,
Kampala: 22,
Addis: 24.7,
},
{
year: "2019",
Lagos: 38.3,
Nairobi: 47.3,
Accra: 41.3,
Dakar: 47.9,
Kampala: 27.6,
Addis: 30.4,
},
{
year: "2020",
Lagos: 44.9,
Nairobi: 48.9,
Accra: 47.1,
Dakar: 52.1,
Kampala: 30.1,
Addis: 38.5,
},
{
year: "2021",
Lagos: 48.7,
Nairobi: 49.8,
Accra: 50.2,
Dakar: 53.6,
Kampala: 31.8,
Addis: 43.9,
},
{
year: "2022",
Lagos: 50.9,
Nairobi: 54.1,
Accra: 51.7,
Dakar: 53.5,
Kampala: 37,
Addis: 47.7,
},
{
year: "2023",
Lagos: 56.3,
Nairobi: 58.3,
Accra: 56.3,
Dakar: 56.5,
Kampala: 41.9,
Addis: 54.6,
},
{
year: "2024",
Lagos: 61,
Nairobi: 59.5,
Accra: 60.2,
Dakar: 58.8,
Kampala: 44,
Addis: 60.8,
},
];
export function Example() {
return (
<LineChart
data={data}
x="year"
y={["Lagos", "Nairobi", "Accra", "Dakar", "Kampala", "Addis"]}
format={"{value}%"}
title="Five of six cities had between 58.8% and 61% of households using mobile money in 2024"
subtitle="Households with a mobile money account"
note="Illustrative data"
/>
);
}{
"type": "line-chart",
"data": [
{
"year": "2015",
"Lagos": 20.6,
"Nairobi": 36,
"Accra": 26.6,
"Dakar": 39.6,
"Kampala": 13,
"Addis": 6.6
},
{
"year": "2016",
"Lagos": 26.9,
"Nairobi": 38.7,
"Accra": 32.2,
"Dakar": 43.6,
"Kampala": 16.6,
"Addis": 14.5
},
{
"year": "2017",
"Lagos": 31.9,
"Nairobi": 39.2,
"Accra": 36.4,
"Dakar": 46.2,
"Kampala": 17.9,
"Addis": 21
},
{
"year": "2018",
"Lagos": 34.1,
"Nairobi": 42.5,
"Accra": 37.8,
"Dakar": 46,
"Kampala": 22,
"Addis": 24.7
},
{
"year": "2019",
"Lagos": 38.3,
"Nairobi": 47.3,
"Accra": 41.3,
"Dakar": 47.9,
"Kampala": 27.6,
"Addis": 30.4
},
{
"year": "2020",
"Lagos": 44.9,
"Nairobi": 48.9,
"Accra": 47.1,
"Dakar": 52.1,
"Kampala": 30.1,
"Addis": 38.5
},
{
"year": "2021",
"Lagos": 48.7,
"Nairobi": 49.8,
"Accra": 50.2,
"Dakar": 53.6,
"Kampala": 31.8,
"Addis": 43.9
},
{
"year": "2022",
"Lagos": 50.9,
"Nairobi": 54.1,
"Accra": 51.7,
"Dakar": 53.5,
"Kampala": 37,
"Addis": 47.7
},
{
"year": "2023",
"Lagos": 56.3,
"Nairobi": 58.3,
"Accra": 56.3,
"Dakar": 56.5,
"Kampala": 41.9,
"Addis": 54.6
},
{
"year": "2024",
"Lagos": 61,
"Nairobi": 59.5,
"Accra": 60.2,
"Dakar": 58.8,
"Kampala": 44,
"Addis": 60.8
}
],
"x": "year",
"y": ["Lagos", "Nairobi", "Accra", "Dakar", "Kampala", "Addis"],
"format": "{value}%",
"title": "Five of six cities had between 58.8% and 61% of households using mobile money in 2024",
"subtitle": "Households with a mobile money account",
"note": "Illustrative data"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Long format with highlight
Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024
Households with a mobile money account
import { LineChart } from "insightcharts";
const data = [
{ year: "2015", city: "Lagos", share: 20.6 },
{ year: "2015", city: "Nairobi", share: 36 },
{ year: "2015", city: "Kampala", share: 13 },
{ year: "2015", city: "Addis", share: 6.6 },
{ year: "2016", city: "Lagos", share: 26.9 },
{ year: "2016", city: "Nairobi", share: 38.7 },
{ year: "2016", city: "Kampala", share: 16.6 },
{ year: "2016", city: "Addis", share: 14.5 },
{ year: "2017", city: "Lagos", share: 31.9 },
{ year: "2017", city: "Nairobi", share: 39.2 },
{ year: "2017", city: "Kampala", share: 17.9 },
{ year: "2017", city: "Addis", share: 21 },
{ year: "2018", city: "Lagos", share: 34.1 },
{ year: "2018", city: "Nairobi", share: 42.5 },
{ year: "2018", city: "Kampala", share: 22 },
{ year: "2018", city: "Addis", share: 24.7 },
{ year: "2019", city: "Lagos", share: 38.3 },
{ year: "2019", city: "Nairobi", share: 47.3 },
{ year: "2019", city: "Kampala", share: 27.6 },
{ year: "2019", city: "Addis", share: 30.4 },
{ year: "2020", city: "Lagos", share: 44.9 },
{ year: "2020", city: "Nairobi", share: 48.9 },
{ year: "2020", city: "Kampala", share: 30.1 },
{ year: "2020", city: "Addis", share: 38.5 },
{ year: "2021", city: "Lagos", share: 48.7 },
{ year: "2021", city: "Nairobi", share: 49.8 },
{ year: "2021", city: "Kampala", share: 31.8 },
{ year: "2021", city: "Addis", share: 43.9 },
{ year: "2022", city: "Lagos", share: 50.9 },
{ year: "2022", city: "Nairobi", share: 54.1 },
{ year: "2022", city: "Kampala", share: 37 },
{ year: "2022", city: "Addis", share: 47.7 },
{ year: "2023", city: "Lagos", share: 56.3 },
{ year: "2023", city: "Nairobi", share: 58.3 },
{ year: "2023", city: "Kampala", share: 41.9 },
{ year: "2023", city: "Addis", share: 54.6 },
{ year: "2024", city: "Lagos", share: 61 },
{ year: "2024", city: "Nairobi", share: 59.5 },
{ year: "2024", city: "Kampala", share: 44 },
{ year: "2024", city: "Addis", share: 60.8 },
];
export function Example() {
return (
<LineChart
data={data}
x="year"
y="share"
series="city"
highlight="Addis"
format={"{value}%"}
title="Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024"
subtitle="Households with a mobile money account"
note="Illustrative data"
/>
);
}{
"type": "line-chart",
"data": [
{ "year": "2015", "city": "Lagos", "share": 20.6 },
{ "year": "2015", "city": "Nairobi", "share": 36 },
{ "year": "2015", "city": "Kampala", "share": 13 },
{ "year": "2015", "city": "Addis", "share": 6.6 },
{ "year": "2016", "city": "Lagos", "share": 26.9 },
{ "year": "2016", "city": "Nairobi", "share": 38.7 },
{ "year": "2016", "city": "Kampala", "share": 16.6 },
{ "year": "2016", "city": "Addis", "share": 14.5 },
{ "year": "2017", "city": "Lagos", "share": 31.9 },
{ "year": "2017", "city": "Nairobi", "share": 39.2 },
{ "year": "2017", "city": "Kampala", "share": 17.9 },
{ "year": "2017", "city": "Addis", "share": 21 },
{ "year": "2018", "city": "Lagos", "share": 34.1 },
{ "year": "2018", "city": "Nairobi", "share": 42.5 },
{ "year": "2018", "city": "Kampala", "share": 22 },
{ "year": "2018", "city": "Addis", "share": 24.7 },
{ "year": "2019", "city": "Lagos", "share": 38.3 },
{ "year": "2019", "city": "Nairobi", "share": 47.3 },
{ "year": "2019", "city": "Kampala", "share": 27.6 },
{ "year": "2019", "city": "Addis", "share": 30.4 },
{ "year": "2020", "city": "Lagos", "share": 44.9 },
{ "year": "2020", "city": "Nairobi", "share": 48.9 },
{ "year": "2020", "city": "Kampala", "share": 30.1 },
{ "year": "2020", "city": "Addis", "share": 38.5 },
{ "year": "2021", "city": "Lagos", "share": 48.7 },
{ "year": "2021", "city": "Nairobi", "share": 49.8 },
{ "year": "2021", "city": "Kampala", "share": 31.8 },
{ "year": "2021", "city": "Addis", "share": 43.9 },
{ "year": "2022", "city": "Lagos", "share": 50.9 },
{ "year": "2022", "city": "Nairobi", "share": 54.1 },
{ "year": "2022", "city": "Kampala", "share": 37 },
{ "year": "2022", "city": "Addis", "share": 47.7 },
{ "year": "2023", "city": "Lagos", "share": 56.3 },
{ "year": "2023", "city": "Nairobi", "share": 58.3 },
{ "year": "2023", "city": "Kampala", "share": 41.9 },
{ "year": "2023", "city": "Addis", "share": 54.6 },
{ "year": "2024", "city": "Lagos", "share": 61 },
{ "year": "2024", "city": "Nairobi", "share": 59.5 },
{ "year": "2024", "city": "Kampala", "share": 44 },
{ "year": "2024", "city": "Addis", "share": 60.8 }
],
"x": "year",
"y": "share",
"series": "city",
"highlight": "Addis",
"format": "{value}%",
"title": "Mobile money use in Addis rose from 6.6% in 2015 to 60.8% in 2024",
"subtitle": "Households with a mobile money account",
"note": "Illustrative data"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| xrequired | string | Time or ordered category field. ISO dates are placed on a true time axis. | |
| yrequired | string | string[] | Value field, or several (one line each). | |
| series | string | Field that splits rows into lines (long data). | |
| curve | "linear" | "smooth" | "step" | "linear" | Line shape. |
| area | boolean | false | Light fill under the line; forces a zero baseline. |
| endLabels | boolean | Name each line at its end. Default: on for up to 6 lines. | |
| points | boolean | Marker on every point. Default: on for 12 points or fewer. | |
| zero | boolean | false | Start the value axis at zero. |
| log | boolean | false | Logarithmic value axis. |
| names | Record<string, string> | Display names for series keys. | |
| contextLabels | boolean | string | false | With highlight: name the grey context lines. true adds a muted end label to each when they all fit; a string such as "Other cities" adds one muted legend entry instead. On narrow charts the legend already lists every line. |
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>. |