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.
Treemap
Shows parts of a whole as nested rectangles sized by value, optionally grouped into categories.
- Use when
- Many parts (10 to 100) of very different sizes, or a two-level hierarchy, where the reader needs the largest parts rather than exact comparison: budgets, market capitalisation, export baskets.
- Avoid when
- Fewer than about 6 parts or values that need precise comparison (use bar chart); 2 to 5 parts (use donut chart or segmented bar); values that can be negative (use bar chart); change over time (use line chart).
Preview
Energy produced 75% of global greenhouse gas emissions in 2021
Global emissions by sector and source, billion tonnes of CO2 equivalent, 2021
import { Treemap } from "insightcharts";
const data = [
{ sector: "Energy", source: "Electricity and heat", gt: 15.8 },
{ sector: "Energy", source: "Transport", gt: 8.4 },
{ sector: "Energy", source: "Manufacturing and construction", gt: 6.3 },
{ sector: "Energy", source: "Buildings", gt: 3 },
{ sector: "Energy", source: "Fugitive emissions", gt: 3.3 },
{ sector: "Agriculture", source: "Livestock and manure", gt: 3.5 },
{ sector: "Agriculture", source: "Soils and rice", gt: 2.4 },
{ sector: "Industry", source: "Cement", gt: 1.6 },
{ sector: "Industry", source: "Chemicals and other", gt: 1.6 },
{ sector: "Waste", source: "Landfill and wastewater", gt: 1.7 },
{ sector: "Land use", source: "Deforestation and land-use change", gt: 1.4 },
];
export function Example() {
return (
<Treemap
data={data}
group="sector"
name="source"
value="gt"
format={"{value} Gt"}
title="Energy produced 75% of global greenhouse gas emissions in 2021"
subtitle="Global emissions by sector and source, billion tonnes of CO2 equivalent, 2021"
source="Climate Watch, World Resources Institute"
note="Rounded, approximate figures for illustration"
/>
);
}{
"type": "treemap",
"data": [
{ "sector": "Energy", "source": "Electricity and heat", "gt": 15.8 },
{ "sector": "Energy", "source": "Transport", "gt": 8.4 },
{ "sector": "Energy", "source": "Manufacturing and construction", "gt": 6.3 },
{ "sector": "Energy", "source": "Buildings", "gt": 3 },
{ "sector": "Energy", "source": "Fugitive emissions", "gt": 3.3 },
{ "sector": "Agriculture", "source": "Livestock and manure", "gt": 3.5 },
{ "sector": "Agriculture", "source": "Soils and rice", "gt": 2.4 },
{ "sector": "Industry", "source": "Cement", "gt": 1.6 },
{ "sector": "Industry", "source": "Chemicals and other", "gt": 1.6 },
{ "sector": "Waste", "source": "Landfill and wastewater", "gt": 1.7 },
{ "sector": "Land use", "source": "Deforestation and land-use change", "gt": 1.4 }
],
"group": "sector",
"name": "source",
"value": "gt",
"format": "{value} Gt",
"title": "Energy produced 75% of global greenhouse gas emissions in 2021",
"subtitle": "Global emissions by sector and source, billion tonnes of CO2 equivalent, 2021",
"source": "Climate Watch, World Resources Institute",
"note": "Rounded, approximate figures 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 and 3 infographics use treemap.
Molecules
1Infographics
3A landscape spread of up to eleven small illustrations of one subject, each a different graphic form, in three bands of unequal panels: a statement in large type, spokes round an icon and a network of circles; a smooth trend with its peak labelled, nested squares and a slope chart; a pill ranking, a treemap, a tile map and sized circles; and a closing row of icon statements.
A portrait poster of where something comes from and where it goes, in three stacked bands painted in one colour: the producers as large labelled tiles, the leading producer's output fanning out as ribbons to an aligned column of destinations, and the destinations as bubbles on a scale of how much each depends on that producer.
A poster of one subject by the numbers, in four rows: two figures in large type or as filled silhouettes, two treemaps side by side, a full-width ranking of centred pills with one row highlighted, and packed circles with icons beside a column of sized circles and a closing figure.
Installation
$ pnpm dlx shadcn@latest add @insightcharts/treemapThe 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 { Treemap } from "insightcharts";Examples
Flat, with highlight
Apple, Nvidia and Microsoft were worth $9.8 trillion combined in late 2024
Market capitalisation of the 15 largest US-listed companies, late 2024, $ trillion
import { Treemap } from "insightcharts";
const data = [
{ company: "Nvidia", cap: 3.3 },
{ company: "Apple", cap: 3.4 },
{ company: "Microsoft", cap: 3.1 },
{ company: "Alphabet", cap: 2.1 },
{ company: "Amazon", cap: 2 },
{ company: "Meta", cap: 1.5 },
{ company: "Tesla", cap: 0.8 },
{ company: "Broadcom", cap: 0.8 },
{ company: "Berkshire Hathaway", cap: 1 },
{ company: "Eli Lilly", cap: 0.8 },
{ company: "JPMorgan Chase", cap: 0.6 },
{ company: "Walmart", cap: 0.65 },
{ company: "Visa", cap: 0.55 },
{ company: "ExxonMobil", cap: 0.5 },
{ company: "UnitedHealth", cap: 0.5 },
];
export function Example() {
return (
<Treemap
data={data}
name="company"
value="cap"
format={"${value}tn"}
highlight={["Nvidia", "Apple", "Microsoft"]}
title="Apple, Nvidia and Microsoft were worth $9.8 trillion combined in late 2024"
subtitle="Market capitalisation of the 15 largest US-listed companies, late 2024, $ trillion"
source="Company filings, exchange data"
note="Rounded, illustrative"
/>
);
}{
"type": "treemap",
"data": [
{ "company": "Nvidia", "cap": 3.3 },
{ "company": "Apple", "cap": 3.4 },
{ "company": "Microsoft", "cap": 3.1 },
{ "company": "Alphabet", "cap": 2.1 },
{ "company": "Amazon", "cap": 2 },
{ "company": "Meta", "cap": 1.5 },
{ "company": "Tesla", "cap": 0.8 },
{ "company": "Broadcom", "cap": 0.8 },
{ "company": "Berkshire Hathaway", "cap": 1 },
{ "company": "Eli Lilly", "cap": 0.8 },
{ "company": "JPMorgan Chase", "cap": 0.6 },
{ "company": "Walmart", "cap": 0.65 },
{ "company": "Visa", "cap": 0.55 },
{ "company": "ExxonMobil", "cap": 0.5 },
{ "company": "UnitedHealth", "cap": 0.5 }
],
"name": "company",
"value": "cap",
"format": "${value}tn",
"highlight": ["Nvidia", "Apple", "Microsoft"],
"title": "Apple, Nvidia and Microsoft were worth $9.8 trillion combined in late 2024",
"subtitle": "Market capitalisation of the 15 largest US-listed companies, late 2024, $ trillion",
"source": "Company filings, exchange data",
"note": "Rounded, illustrative"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: many small tiles and long names
Social protection was £306bn of £910bn in UK public spending in 2023-24
Public spending by area and programme, £ billion, 2023-24
import { Treemap } from "insightcharts";
const data = [
{ area: "Health", programme: "Hospital and community health services", bn: 168 },
{ area: "Health", programme: "Primary care and prescribing", bn: 38 },
{ area: "Health", programme: "Public health grants to local authorities", bn: 4 },
{ area: "Social protection", programme: "State pension", bn: 124 },
{
area: "Social protection",
programme: "Universal credit and legacy benefits",
bn: 88,
},
{ area: "Social protection", programme: "Disability and incapacity benefits", bn: 66 },
{ area: "Social protection", programme: "Housing benefit", bn: 16 },
{ area: "Social protection", programme: "Child benefit", bn: 12 },
{ area: "Education", programme: "Schools", bn: 64 },
{ area: "Education", programme: "Higher and further education", bn: 28 },
{ area: "Education", programme: "Early years", bn: 8 },
{ area: "Defence", programme: "Armed forces and equipment", bn: 54 },
{ area: "Debt interest", programme: "Interest on government debt", bn: 104 },
{ area: "Transport", programme: "Rail", bn: 22 },
{ area: "Transport", programme: "Roads and local transport", bn: 14 },
{ area: "Public order", programme: "Police", bn: 20 },
{ area: "Public order", programme: "Courts, prisons and probation", bn: 12 },
{ area: "Public order", programme: "Fire and rescue", bn: 3 },
{ area: "Other", programme: "Housing and environment", bn: 31 },
{ area: "Other", programme: "Overseas aid", bn: 13 },
{ area: "Other", programme: "Culture, media and sport", bn: 9 },
{ area: "Other", programme: "Science and research councils", bn: 12 },
];
export function Example() {
return (
<Treemap
data={data}
group="area"
name="programme"
value="bn"
format={"£{value}bn"}
height={460}
title="Social protection was £306bn of £910bn in UK public spending in 2023-24"
subtitle="Public spending by area and programme, £ billion, 2023-24"
source="HM Treasury Public Expenditure Statistical Analyses"
note="Programme split is illustrative"
/>
);
}{
"type": "treemap",
"data": [
{
"area": "Health",
"programme": "Hospital and community health services",
"bn": 168
},
{ "area": "Health", "programme": "Primary care and prescribing", "bn": 38 },
{
"area": "Health",
"programme": "Public health grants to local authorities",
"bn": 4
},
{ "area": "Social protection", "programme": "State pension", "bn": 124 },
{
"area": "Social protection",
"programme": "Universal credit and legacy benefits",
"bn": 88
},
{
"area": "Social protection",
"programme": "Disability and incapacity benefits",
"bn": 66
},
{ "area": "Social protection", "programme": "Housing benefit", "bn": 16 },
{ "area": "Social protection", "programme": "Child benefit", "bn": 12 },
{ "area": "Education", "programme": "Schools", "bn": 64 },
{ "area": "Education", "programme": "Higher and further education", "bn": 28 },
{ "area": "Education", "programme": "Early years", "bn": 8 },
{ "area": "Defence", "programme": "Armed forces and equipment", "bn": 54 },
{ "area": "Debt interest", "programme": "Interest on government debt", "bn": 104 },
{ "area": "Transport", "programme": "Rail", "bn": 22 },
{ "area": "Transport", "programme": "Roads and local transport", "bn": 14 },
{ "area": "Public order", "programme": "Police", "bn": 20 },
{ "area": "Public order", "programme": "Courts, prisons and probation", "bn": 12 },
{ "area": "Public order", "programme": "Fire and rescue", "bn": 3 },
{ "area": "Other", "programme": "Housing and environment", "bn": 31 },
{ "area": "Other", "programme": "Overseas aid", "bn": 13 },
{ "area": "Other", "programme": "Culture, media and sport", "bn": 9 },
{ "area": "Other", "programme": "Science and research councils", "bn": 12 }
],
"group": "area",
"name": "programme",
"value": "bn",
"format": "£{value}bn",
"height": 460,
"title": "Social protection was £306bn of £910bn in UK public spending in 2023-24",
"subtitle": "Public spending by area and programme, £ billion, 2023-24",
"source": "HM Treasury Public Expenditure Statistical Analyses",
"note": "Programme split is illustrative"
}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 | Leaf name field: one tile per row. | |
| valuerequired | string | Value field: tile area. Non-positive values are dropped. | |
| group | string | Parent field. Rows sharing a group are drawn together and share a colour. | |
| labels | boolean | true | Print the value under the name where the tile is big enough. |
| groupLabels | boolean | Heading strip above each group. Default: on when group is set and not compact. | |
| names | Record<string, string> | Display names for group keys. |
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>. |