A poster that describes one subject from four sides: the subject as one large silhouette filled to a share (shape-fill), two to four large figures, its place among other things on one scale (scale-ladder), and a table that sets it beside its peers with every number drawn as a small form (glyph-table).
Scale ladder
A tall vertical band graded along one scale (linear or log, running up or down) with each item placed at its true position and labelled with an icon, its name and its value on alternating sides.
- Use when
- Answering how deep, how high, how hot, how old or how far each of 4 to about 20 things is on one shared scale, when the reader needs the positions themselves: depths, altitudes, temperatures, ages, distances. Use
zonesto name ranges along the scale. - Avoid when
- Comparing sizes rather than positions (use bar chart or lollipop chart); events with start and end dates (use timeline chart); a distribution of many unnamed values (use strip plot or histogram).
Preview
import { ScaleLadder } from "insightcharts";
const data = [
{ thing: "Fridge", c: 4 },
{ thing: "Chocolate melts", c: 34 },
{ thing: "Egg white sets", c: 62 },
{ thing: "Water boils", c: 100, icon: "drop" },
{ thing: "Sugar caramelises", c: 170 },
{ thing: "Deep-frying oil", c: 180, icon: "drop" },
{ thing: "Bread bakes", c: 220 },
{ thing: "Home oven at full heat", c: 250 },
{ thing: "Wood-fired pizza oven", c: 450 },
];
export function Example() {
return (
<ScaleLadder
data={data}
name="thing"
value="c"
iconField="icon"
format={"{value}°C"}
scaleLabel="Temperature"
min={0}
max={500}
zones={[
{ from: 0, to: 100, label: "Below boiling" },
{ from: 100, to: 250, label: "Home oven range" },
{ from: 250, to: 500, label: "Wood-fired oven range" },
]}
title="Nine kitchen temperatures from 4°C to 450°C"
subtitle="Typical temperatures in a kitchen, degrees Celsius"
note="Approximate, rounded figures."
/>
);
}{
"type": "scale-ladder",
"data": [
{ "thing": "Fridge", "c": 4 },
{ "thing": "Chocolate melts", "c": 34 },
{ "thing": "Egg white sets", "c": 62 },
{ "thing": "Water boils", "c": 100, "icon": "drop" },
{ "thing": "Sugar caramelises", "c": 170 },
{ "thing": "Deep-frying oil", "c": 180, "icon": "drop" },
{ "thing": "Bread bakes", "c": 220 },
{ "thing": "Home oven at full heat", "c": 250 },
{ "thing": "Wood-fired pizza oven", "c": 450 }
],
"name": "thing",
"value": "c",
"iconField": "icon",
"format": "{value}°C",
"scaleLabel": "Temperature",
"min": 0,
"max": 500,
"zones": [
{ "from": 0, "to": 100, "label": "Below boiling" },
{ "from": 100, "to": 250, "label": "Home oven range" },
{ "from": 250, "to": 500, "label": "Wood-fired oven range" }
],
"title": "Nine kitchen temperatures from 4°C to 450°C",
"subtitle": "Typical temperatures in a kitchen, degrees Celsius",
"note": "Approximate, rounded figures."
}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 scale ladder.
Infographics
2A tall poster that is one illustrated scale: a full-height scale-ladder with icons, leader-labelled items and named zones, and a narrow side column of large figures and one small graphic, each set level with the part of the scale it describes.
Installation
$ pnpm dlx shadcn@latest add @insightcharts/scale-ladderThe 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 { ScaleLadder } from "insightcharts";Examples
Depth, log scale, running down, one highlighted
import { ScaleLadder } from "insightcharts";
const data = [
{ thing: "Water main", m: 1.2, icon: "drop" },
{ thing: "Street tree roots", m: 2, icon: "tree" },
{ thing: "Cellar floor", m: 3, icon: "house" },
{ thing: "Main sewer", m: 6 },
{ thing: "Metro platform", m: 24, icon: "person" },
{ thing: "Road tunnel", m: 40, icon: "car" },
{ thing: "Geothermal borehole", m: 180, icon: "bolt" },
{ thing: "Drinking-water well", m: 320, icon: "drop" },
];
export function Example() {
return (
<ScaleLadder
data={data}
name="thing"
value="m"
iconField="icon"
scale="log"
direction="down"
scaleLabel="Depth below street level, metres"
format={"{value} m"}
highlight="Drinking-water well"
title="The drinking-water well reached 320 metres below street level"
subtitle="Depth of eight things under one city street, metres below street level"
note="Illustrative figures for an invented city."
/>
);
}{
"type": "scale-ladder",
"data": [
{ "thing": "Water main", "m": 1.2, "icon": "drop" },
{ "thing": "Street tree roots", "m": 2, "icon": "tree" },
{ "thing": "Cellar floor", "m": 3, "icon": "house" },
{ "thing": "Main sewer", "m": 6 },
{ "thing": "Metro platform", "m": 24, "icon": "person" },
{ "thing": "Road tunnel", "m": 40, "icon": "car" },
{ "thing": "Geothermal borehole", "m": 180, "icon": "bolt" },
{ "thing": "Drinking-water well", "m": 320, "icon": "drop" }
],
"name": "thing",
"value": "m",
"iconField": "icon",
"scale": "log",
"direction": "down",
"scaleLabel": "Depth below street level, metres",
"format": "{value} m",
"highlight": "Drinking-water well",
"title": "The drinking-water well reached 320 metres below street level",
"subtitle": "Depth of eight things under one city street, metres below street level",
"note": "Illustrative figures for an invented city."
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: 14 items, crowded values, long names
import { ScaleLadder } from "insightcharts";
const data = [
{ structure: "Cathedral spire", m: 96 },
{ structure: "Old telecommunications tower", m: 142 },
{ structure: "Harbour crane", m: 68 },
{ structure: "Riverside residential tower, phase two", m: 131 },
{ structure: "City hall clock tower", m: 74 },
{ structure: "Northgate office block", m: 88 },
{ structure: "Stadium floodlight mast", m: 62 },
{ structure: "University library", m: 41 },
{ structure: "Grain silo", m: 58 },
{ structure: "Central Station roof", m: 33 },
{ structure: "Suspension bridge pylon", m: 127 },
{ structure: "Wind turbine at the port, blade tip", m: 198 },
{ structure: "Water tower", m: 47 },
{ structure: "Observation wheel", m: 110 },
];
export function Example() {
return (
<ScaleLadder
data={data}
name="structure"
value="m"
icon="square"
scaleLabel="Height, metres"
format={"{value} m"}
min={0}
title="The port wind turbine reached 198 metres at its blade tip"
subtitle="Height of 14 structures in one city, metres above ground"
note="Illustrative figures for an invented city."
/>
);
}{
"type": "scale-ladder",
"data": [
{ "structure": "Cathedral spire", "m": 96 },
{ "structure": "Old telecommunications tower", "m": 142 },
{ "structure": "Harbour crane", "m": 68 },
{ "structure": "Riverside residential tower, phase two", "m": 131 },
{ "structure": "City hall clock tower", "m": 74 },
{ "structure": "Northgate office block", "m": 88 },
{ "structure": "Stadium floodlight mast", "m": 62 },
{ "structure": "University library", "m": 41 },
{ "structure": "Grain silo", "m": 58 },
{ "structure": "Central Station roof", "m": 33 },
{ "structure": "Suspension bridge pylon", "m": 127 },
{ "structure": "Wind turbine at the port, blade tip", "m": 198 },
{ "structure": "Water tower", "m": 47 },
{ "structure": "Observation wheel", "m": 110 }
],
"name": "structure",
"value": "m",
"icon": "square",
"scaleLabel": "Height, metres",
"format": "{value} m",
"min": 0,
"title": "The port wind turbine reached 198 metres at its blade tip",
"subtitle": "Height of 14 structures in one city, metres above ground",
"note": "Illustrative figures for an invented city."
}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 | Field holding each item's name. | |
| valuerequired | string | Field holding each item's position on the scale. | |
| icon | IconInput | One icon for every item: a built-in name or a path:// string. Items without an icon get a dot. | |
| iconField | string | Field holding a per-item icon name or path:// string. Overrides icon. | |
| scale | "linear" | "log" | "linear" | Log spaces the scale by powers of ten; the heading over the band says so. |
| direction | "up" | "down" | "up" | up: larger values higher (height, temperature). down: larger values lower (depth, age). |
| min | number | Start of the scale. Default: a round number at or below the smallest value. | |
| max | number | End of the scale. Default: a round number at or above the largest value. | |
| ticks | number[] | Values that get a boxed label on the band. Default: round steps, or powers of ten on a log scale. | |
| zones | { from: number; to: number; label: string }[] | Named ranges along the scale, shaded across the graphic and named along its outer edge. | |
| scaleLabel | string | Heading over the band: the measure and its unit, e.g. "Depth, metres". | |
| names | Record<string, string> | Display names for item keys. | |
| bandWidth | number | Width of the band in px, at most 40% of the plot width. Default 60, or 46 on narrow screens. |
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>. |