The sheet an infographic is composed on. It paints a full-bleed ground from a poster theme, forces one theme and colour mode on everything inside, and lays out a masthead, a grid of panels and a footer. It can save the whole sheet as one PNG.
Pictogram chart
Compares quantities with rows of repeated icons, each icon standing for a fixed number of units.
- Use when
- A few categories (2 to 6) of countable things, people, homes, vehicles, where making the quantity concrete matters more than reading precise values.
- Avoid when
- More than about 8 categories or values that need precise comparison (use bar chart); a share of one whole (use waffle chart); values that would need more than about 60 icons in a row (raise
unit, or use bar chart).
Preview
Delhi had 33.8 million people in 2024, 3.3 million fewer than Tokyo
Population of the five largest urban agglomerations, 2024
import { PictogramChart } from "insightcharts";
const data = [
{ city: "Tokyo", people: 37.1 },
{ city: "Delhi", people: 33.8 },
{ city: "Shanghai", people: 29.9 },
{ city: "São Paulo", people: 22.8 },
{ city: "Mexico City", people: 22.5 },
];
export function Example() {
return (
<PictogramChart
data={data}
name="city"
value="people"
unit={2}
unitLabel="2 million people"
format={"{value}m"}
highlight="Delhi"
title="Delhi had 33.8 million people in 2024, 3.3 million fewer than Tokyo"
subtitle="Population of the five largest urban agglomerations, 2024"
source="UN World Urbanization Prospects"
note="Figures are approximate, for illustration"
/>
);
}{
"type": "pictogram-chart",
"data": [
{ "city": "Tokyo", "people": 37.1 },
{ "city": "Delhi", "people": 33.8 },
{ "city": "Shanghai", "people": 29.9 },
{ "city": "São Paulo", "people": 22.8 },
{ "city": "Mexico City", "people": 22.5 }
],
"name": "city",
"value": "people",
"unit": 2,
"unitLabel": "2 million people",
"format": "{value}m",
"highlight": "Delhi",
"title": "Delhi had 33.8 million people in 2024, 3.3 million fewer than Tokyo",
"subtitle": "Population of the five largest urban agglomerations, 2024",
"source": "UN World Urbanization Prospects",
"note": "Figures are approximate, for illustration"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
1 molecule uses pictogram chart.
Molecules
1Installation
$ pnpm dlx shadcn@latest add @insightcharts/pictogram-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 { PictogramChart } from "insightcharts";Examples
Houses, sorted
The UK completed 3.1 million homes in the 1970s and 1.5 million in the 2010s
New dwellings completed per decade, United Kingdom
import { PictogramChart } from "insightcharts";
const data = [
{ decade: "1970s", homes: 3.1 },
{ decade: "1980s", homes: 2.2 },
{ decade: "1990s", homes: 1.6 },
{ decade: "2000s", homes: 1.9 },
{ decade: "2010s", homes: 1.5 },
];
export function Example() {
return (
<PictogramChart
data={data}
name="decade"
value="homes"
unit={0.25}
unitLabel="250,000 homes"
icon="house"
format={"{value}m"}
title="The UK completed 3.1 million homes in the 1970s and 1.5 million in the 2010s"
subtitle="New dwellings completed per decade, United Kingdom"
source="ONS house building data"
note="Rounded for illustration"
/>
);
}{
"type": "pictogram-chart",
"data": [
{ "decade": "1970s", "homes": 3.1 },
{ "decade": "1980s", "homes": 2.2 },
{ "decade": "1990s", "homes": 1.6 },
{ "decade": "2000s", "homes": 1.9 },
{ "decade": "2010s", "homes": 1.5 }
],
"name": "decade",
"value": "homes",
"unit": 0.25,
"unitLabel": "250,000 homes",
"icon": "house",
"format": "{value}m",
"title": "The UK completed 3.1 million homes in the 1970s and 1.5 million in the 2010s",
"subtitle": "New dwellings completed per decade, United Kingdom",
"source": "ONS house building data",
"note": "Rounded for illustration"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Shares as drops
Agriculture accounts for 70% of global freshwater withdrawals
Share of global freshwater withdrawals by sector
import { PictogramChart } from "insightcharts";
const data = [
{ use: "Agriculture", litres: 70 },
{ use: "Industry", litres: 19 },
{ use: "Households", litres: 11 },
];
export function Example() {
return (
<PictogramChart
data={data}
name="use"
value="litres"
unit={5}
unitLabel="5 of every 100 litres"
icon="drop"
format={"{value}%"}
height={200}
title="Agriculture accounts for 70% of global freshwater withdrawals"
subtitle="Share of global freshwater withdrawals by sector"
source="FAO AQUASTAT"
note="Figures are approximate, for illustration"
/>
);
}{
"type": "pictogram-chart",
"data": [
{ "use": "Agriculture", "litres": 70 },
{ "use": "Industry", "litres": 19 },
{ "use": "Households", "litres": 11 }
],
"name": "use",
"value": "litres",
"unit": 5,
"unitLabel": "5 of every 100 litres",
"icon": "drop",
"format": "{value}%",
"height": 200,
"title": "Agriculture accounts for 70% of global freshwater withdrawals",
"subtitle": "Share of global freshwater withdrawals by sector",
"source": "FAO AQUASTAT",
"note": "Figures are approximate, for illustration"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: many icons wrap, long names
There were 28.4 million battery electric cars on the road in 2023
Electric cars on the road worldwide, 2023
import { PictogramChart } from "insightcharts";
const data = [
{ fleet: "Battery electric passenger cars", cars: 28.4 },
{ fleet: "Plug-in hybrids", cars: 12.1 },
{ fleet: "Hydrogen fuel cell", cars: 0.3 },
];
export function Example() {
return (
<PictogramChart
data={data}
name="fleet"
value="cars"
unit={0.5}
unitLabel="500,000 cars"
icon="car"
format={"{value}m"}
height={300}
title="There were 28.4 million battery electric cars on the road in 2023"
subtitle="Electric cars on the road worldwide, 2023"
source="IEA Global EV Outlook 2024"
note="Figures are approximate, for illustration"
/>
);
}{
"type": "pictogram-chart",
"data": [
{ "fleet": "Battery electric passenger cars", "cars": 28.4 },
{ "fleet": "Plug-in hybrids", "cars": 12.1 },
{ "fleet": "Hydrogen fuel cell", "cars": 0.3 }
],
"name": "fleet",
"value": "cars",
"unit": 0.5,
"unitLabel": "500,000 cars",
"icon": "car",
"format": "{value}m",
"height": 300,
"title": "There were 28.4 million battery electric cars on the road in 2023",
"subtitle": "Electric cars on the road worldwide, 2023",
"source": "IEA Global EV Outlook 2024",
"note": "Figures are approximate, for illustration"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | Category field: one row of icons per category. | |
| valuerequired | string | Value field. | |
| unit | number | Units per icon. Default: a round number giving the largest row about ten icons. | |
| unitLabel | string | What one icon stands for, for the key line, e.g. "1 million people". | |
| icon | IconName | "path://..." | "person" | Built-in icon name from core/icons.ts ("person", "house", "car", "tree", "coin", "drop", "bolt", "wind-turbine", "wheat" and about 60 more) or a custom single SVG path. |
| icons | Record<string, string> | Icon per category key; falls back to icon. | |
| perRow | number | Wrap rows after this many icons. Default: as many as fit. | |
| labels | boolean | true | Print the value after each row. |
| sort | "none" | "asc" | "desc" | "none" | Row order. |
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>. |