A 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.
Proportional area
Compares two to eight values as squares or circles whose areas are proportional to the values, each printed with its name and number.
- Use when
- A few quantities that differ a lot (2 times to 100 times), where the reader should feel the difference in size: lake areas, budgets, market sizes. Nest them to show one quantity inside another.
- Avoid when
- Values within about 30% of each other, where areas look the same (use block bars or bar chart); more than 8 values (use treemap or bar chart); parts of one whole (use treemap or waffle chart); negative values.
Preview
import { ProportionalArea } from "insightcharts";
const data = [
{ lake: "Superior", area: 82100 },
{ lake: "Victoria", area: 68900 },
{ lake: "Tanganyika", area: 32900 },
{ lake: "Erie", area: 25700 },
{ lake: "Titicaca", area: 8370 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="lake"
value="area"
format="integer"
ratio
title="Lake Superior covers 82,100 km², 9.8 times Lake Titicaca"
subtitle="Surface area of five lakes, square kilometres"
source="Approximate published figures"
note="Rounded, for illustration"
/>
);
}{
"type": "proportional-area",
"data": [
{ "lake": "Superior", "area": 82100 },
{ "lake": "Victoria", "area": 68900 },
{ "lake": "Tanganyika", "area": 32900 },
{ "lake": "Erie", "area": 25700 },
{ "lake": "Titicaca", "area": 8370 }
],
"name": "lake",
"value": "area",
"format": "integer",
"ratio": true,
"title": "Lake Superior covers 82,100 km², 9.8 times Lake Titicaca",
"subtitle": "Surface area of five lakes, square kilometres",
"source": "Approximate published figures",
"note": "Rounded, for illustration"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
2 infographics use proportional area.
Infographics
2A poster that counts at scale. Blocks of thousands of unit icons fill most of the sheet, a second band counts reference groups with the same icon at the same size in a muted colour, and a bottom row holds three small graphics: squares sized by area with a ratio bracket, thick bars with the numbers inside, and shares as nested outlines or filled silhouettes.
Installation
$ pnpm dlx shadcn@latest add @insightcharts/proportional-areaThe 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 { ProportionalArea } from "insightcharts";Examples
Nested squares, highlight, click to select
import { ProportionalArea } from "insightcharts";
const data = [
{ market: "All groceries", sales: 412 },
{ market: "Fresh produce", sales: 96 },
{ market: "Organic produce", sales: 21 },
{ market: "Organic berries", sales: 3.4 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="market"
value="sales"
layout="nested"
format={"£{value}m"}
highlight="Organic produce"
select
ratio={"{largest} is {ratio} times {smallest}"}
title="Organic produce took £21m of £412m grocery sales in 2025"
subtitle="Annual sales of one regional grocer by category, £ million, 2025"
source="Illustrative data"
note="Invented figures"
/>
);
}{
"type": "proportional-area",
"data": [
{ "market": "All groceries", "sales": 412 },
{ "market": "Fresh produce", "sales": 96 },
{ "market": "Organic produce", "sales": 21 },
{ "market": "Organic berries", "sales": 3.4 }
],
"name": "market",
"value": "sales",
"layout": "nested",
"format": "£{value}m",
"highlight": "Organic produce",
"select": true,
"ratio": "{largest} is {ratio} times {smallest}",
"title": "Organic produce took £21m of £412m grocery sales in 2025",
"subtitle": "Annual sales of one regional grocer by category, £ million, 2025",
"source": "Illustrative data",
"note": "Invented figures"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Circles in a row
import { ProportionalArea } from "insightcharts";
const data = [
{ reactor: "Harlow A", output: 1650 },
{ reactor: "Brant Point", output: 1100 },
{ reactor: "Selby 2", output: 470 },
{ reactor: "Test unit", output: 40 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="reactor"
value="output"
shape="circle"
format={"{value} MW"}
ratio
title="Harlow A has a capacity of 1,650 MW"
subtitle="Generating capacity of four power stations, megawatts"
source="Illustrative data"
note="Invented figures"
/>
);
}{
"type": "proportional-area",
"data": [
{ "reactor": "Harlow A", "output": 1650 },
{ "reactor": "Brant Point", "output": 1100 },
{ "reactor": "Selby 2", "output": 470 },
{ "reactor": "Test unit", "output": 40 }
],
"name": "reactor",
"value": "output",
"shape": "circle",
"format": "{value} MW",
"ratio": true,
"title": "Harlow A has a capacity of 1,650 MW",
"subtitle": "Generating capacity of four power stations, megawatts",
"source": "Illustrative data",
"note": "Invented figures"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Nested circles
import { ProportionalArea } from "insightcharts";
const data = [
{ body: "Whole catchment", area: 5200 },
{ body: "Farmland", area: 2900 },
{ body: "Woodland", area: 1150 },
{ body: "Open water", area: 160 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="body"
value="area"
shape="circle"
layout="nested"
format={"{value} km²"}
title="Farmland covers 2,900 km² of the 5,200 km² catchment"
subtitle="Land cover of the River Teme catchment, square kilometres"
source="Illustrative data"
note="Invented figures"
/>
);
}{
"type": "proportional-area",
"data": [
{ "body": "Whole catchment", "area": 5200 },
{ "body": "Farmland", "area": 2900 },
{ "body": "Woodland", "area": 1150 },
{ "body": "Open water", "area": 160 }
],
"name": "body",
"value": "area",
"shape": "circle",
"layout": "nested",
"format": "{value} km²",
"title": "Farmland covers 2,900 km² of the 5,200 km² catchment",
"subtitle": "Land cover of the River Teme catchment, square kilometres",
"source": "Illustrative data",
"note": "Invented figures"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: eight packed circles, very uneven, long names
import { ProportionalArea } from "insightcharts";
const data = [
{ fund: "State pension and retirement benefits", spend: 124 },
{ fund: "Health services", spend: 88 },
{ fund: "Schools", spend: 52 },
{ fund: "Defence", spend: 31 },
{ fund: "Transport infrastructure", spend: 18 },
{ fund: "Courts and prisons", spend: 7.5 },
{ fund: "Overseas aid", spend: 2.2 },
{ fund: "National parks and heritage sites", spend: 0.6 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="fund"
value="spend"
shape="circle"
layout="packed"
format={"{value}bn"}
ratio
title="Pensions took 124bn of the 323.3bn budget"
subtitle="Planned public spending by area, billions, 2025"
source="Illustrative data"
note="Invented figures for a fictional country"
/>
);
}{
"type": "proportional-area",
"data": [
{ "fund": "State pension and retirement benefits", "spend": 124 },
{ "fund": "Health services", "spend": 88 },
{ "fund": "Schools", "spend": 52 },
{ "fund": "Defence", "spend": 31 },
{ "fund": "Transport infrastructure", "spend": 18 },
{ "fund": "Courts and prisons", "spend": 7.5 },
{ "fund": "Overseas aid", "spend": 2.2 },
{ "fund": "National parks and heritage sites", "spend": 0.6 }
],
"name": "fund",
"value": "spend",
"shape": "circle",
"layout": "packed",
"format": "{value}bn",
"ratio": true,
"title": "Pensions took 124bn of the 323.3bn budget",
"subtitle": "Planned public spending by area, billions, 2025",
"source": "Illustrative data",
"note": "Invented figures for a fictional country"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Packed squares
import { ProportionalArea } from "insightcharts";
const data = [
{ fund: "Pensions", spend: 124 },
{ fund: "Health", spend: 88 },
{ fund: "Schools", spend: 52 },
{ fund: "Defence", spend: 31 },
{ fund: "Transport", spend: 18 },
{ fund: "Courts", spend: 7.5 },
];
export function Example() {
return (
<ProportionalArea
data={data}
name="fund"
value="spend"
layout="packed"
format={"{value}bn"}
title="Health took 88bn of planned spending in 2025"
subtitle="Planned public spending by area, billions, 2025"
source="Illustrative data"
note="Invented figures for a fictional country"
/>
);
}{
"type": "proportional-area",
"data": [
{ "fund": "Pensions", "spend": 124 },
{ "fund": "Health", "spend": 88 },
{ "fund": "Schools", "spend": 52 },
{ "fund": "Defence", "spend": 31 },
{ "fund": "Transport", "spend": 18 },
{ "fund": "Courts", "spend": 7.5 }
],
"name": "fund",
"value": "spend",
"layout": "packed",
"format": "{value}bn",
"title": "Health took 88bn of planned spending in 2025",
"subtitle": "Planned public spending by area, billions, 2025",
"source": "Illustrative data",
"note": "Invented figures for a fictional country"
}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 shape per row. | |
| valuerequired | string | Value field. Each shape's area is proportional to it. | |
| shape | "square" | "circle" | "square" | Squares or circles. |
| layout | "row" | "nested" | "packed" | "row" | row: side by side on a common baseline. nested: inside one another from a shared corner (squares) or lowest point (circles). packed: clustered together. |
| ratio | boolean | string | Print how many times the largest value is the smallest. true for "{largest} is {ratio} times {smallest}", or a template with those placeholders. | |
| sort | "none" | "asc" | "desc" | "none" | Order of the shapes in the row layout. Nested and packed always draw largest first. |
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>. |