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.
Pill rank
Shows a ranked list as horizontally centred rounded bars, with each name in capitals on its pill, the value at the left edge and the rank at the right.
- Use when
- A poster ranking of 4 to about 20 named things where the order and the overall silhouette matter more than fine differences: top cities, largest employers, league tables, with one row highlighted and optional reference rows set apart below.
- Avoid when
- Precise comparison of values (use bar chart, where bars share a baseline); negative values (use diverging bar chart); change in rank over time (use bump chart); more than about 25 rows (use data table).
Preview
import { PillRank } from "insightcharts";
const data = [
{ river: "Nile", km: 6650 },
{ river: "Amazon", km: 6400 },
{ river: "Yangtze", km: 6300 },
{ river: "Mississippi-Missouri", km: 6275 },
{ river: "Yenisei", km: 5539 },
{ river: "Yellow River", km: 5464 },
{ river: "Ob-Irtysh", km: 5410 },
{ river: "Congo", km: 4700 },
{ river: "Danube", km: 2850 },
{ river: "Rhine", km: 1230 },
];
export function Example() {
return (
<PillRank
data={data}
name="river"
value="km"
format={"{value} km"}
highlight="Congo"
compare={["Danube", "Rhine"]}
compareLabel="Europe, for comparison"
title="The Congo is 4,700 km long"
subtitle="Length of eight major river systems and two European rivers, kilometres"
source="Encyclopaedia Britannica"
note="Lengths of river systems are approximate and vary by source"
/>
);
}{
"type": "pill-rank",
"data": [
{ "river": "Nile", "km": 6650 },
{ "river": "Amazon", "km": 6400 },
{ "river": "Yangtze", "km": 6300 },
{ "river": "Mississippi-Missouri", "km": 6275 },
{ "river": "Yenisei", "km": 5539 },
{ "river": "Yellow River", "km": 5464 },
{ "river": "Ob-Irtysh", "km": 5410 },
{ "river": "Congo", "km": 4700 },
{ "river": "Danube", "km": 2850 },
{ "river": "Rhine", "km": 1230 }
],
"name": "river",
"value": "km",
"format": "{value} km",
"highlight": "Congo",
"compare": ["Danube", "Rhine"],
"compareLabel": "Europe, for comparison",
"title": "The Congo is 4,700 km long",
"subtitle": "Length of eight major river systems and two European rivers, kilometres",
"source": "Encyclopaedia Britannica",
"note": "Lengths of river systems are approximate and vary by source"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Composition
Used in
4 infographics use pill rank.
Infographics
4A poster of who is connected to whom: a full-width arc diagram with one arc per connection, as thick as its value (arc-diagram), a strip of two to four large figures, and a bottom row where the same entities return as circles joined by lines (bubble-network) and as a ranking of centred pills (pill-rank).
A poster with one subject in the middle of the sheet: a wheel of spokes round an icon (radial-spokes), two to four large figures standing either side of it, and a bottom row with the same subject's surroundings on concentric rings (orbit-chart) and a ranking as centred pills (pill-rank).
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/pill-rankThe 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 { PillRank } from "insightcharts";Examples
No highlight, click to select
import { PillRank } from "insightcharts";
const data = [
{ hobby: "Reading", pct: 71 },
{ hobby: "Walking", pct: 64 },
{ hobby: "Cooking", pct: 58 },
{ hobby: "Gardening", pct: 41 },
{ hobby: "Cycling", pct: 33 },
{ hobby: "Swimming", pct: 27 },
{ hobby: "Knitting", pct: 12 },
];
export function Example() {
return (
<PillRank
data={data}
name="hobby"
value="pct"
format={"{value}%"}
select
title="71% of adults surveyed read for pleasure"
subtitle="Share of 1,200 adults who did each activity in the past month"
note="Illustrative survey figures"
/>
);
}{
"type": "pill-rank",
"data": [
{ "hobby": "Reading", "pct": 71 },
{ "hobby": "Walking", "pct": 64 },
{ "hobby": "Cooking", "pct": 58 },
{ "hobby": "Gardening", "pct": 41 },
{ "hobby": "Cycling", "pct": 33 },
{ "hobby": "Swimming", "pct": 27 },
{ "hobby": "Knitting", "pct": 12 }
],
"name": "hobby",
"value": "pct",
"format": "{value}%",
"select": true,
"title": "71% of adults surveyed read for pleasure",
"subtitle": "Share of 1,200 adults who did each activity in the past month",
"note": "Illustrative survey figures"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Stress: 16 rows, long names, values from 3 to 2,140
import { PillRank } from "insightcharts";
const data = [
{ port: "Port of Saint-Hilaire-du-Rosier", teu: 2140 },
{ port: "Kessel Deepwater", teu: 1730 },
{ port: "Marrow Bay", teu: 1205 },
{ port: "New Alderney Container Terminal", teu: 980 },
{ port: "Tolland", teu: 760 },
{ port: "Vasque", teu: 512 },
{ port: "Great Northern Free Harbour and Dry Dock", teu: 430 },
{ port: "Orm", teu: 298 },
{ port: "Halvard Sound", teu: 190 },
{ port: "Pike's Landing", teu: 122 },
{ port: "Sable", teu: 75 },
{ port: "Little Wexcombe-on-the-Estuary", teu: 41 },
{ port: "Ruddock", teu: 22 },
{ port: "Cay", teu: 11 },
{ port: "Fenwater Marina", teu: 6 },
{ port: "Ix", teu: 3 },
];
export function Example() {
return (
<PillRank
data={data}
name="port"
value="teu"
format="compact"
highlight="Tolland"
title="Tolland handled 760 thousand containers in 2024"
subtitle="Container throughput of 16 ports, thousand TEU, 2024"
note="Illustrative figures for invented ports"
/>
);
}{
"type": "pill-rank",
"data": [
{ "port": "Port of Saint-Hilaire-du-Rosier", "teu": 2140 },
{ "port": "Kessel Deepwater", "teu": 1730 },
{ "port": "Marrow Bay", "teu": 1205 },
{ "port": "New Alderney Container Terminal", "teu": 980 },
{ "port": "Tolland", "teu": 760 },
{ "port": "Vasque", "teu": 512 },
{ "port": "Great Northern Free Harbour and Dry Dock", "teu": 430 },
{ "port": "Orm", "teu": 298 },
{ "port": "Halvard Sound", "teu": 190 },
{ "port": "Pike's Landing", "teu": 122 },
{ "port": "Sable", "teu": 75 },
{ "port": "Little Wexcombe-on-the-Estuary", "teu": 41 },
{ "port": "Ruddock", "teu": 22 },
{ "port": "Cay", "teu": 11 },
{ "port": "Fenwater Marina", "teu": 6 },
{ "port": "Ix", "teu": 3 }
],
"name": "port",
"value": "teu",
"format": "compact",
"highlight": "Tolland",
"title": "Tolland handled 760 thousand containers in 2024",
"subtitle": "Container throughput of 16 ports, thousand TEU, 2024",
"note": "Illustrative figures for invented ports"
}Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.
Data order, no ranks
import { PillRank } from "insightcharts";
const data = [
{ day: "Monday", visits: 312 },
{ day: "Tuesday", visits: 344 },
{ day: "Wednesday", visits: 371 },
{ day: "Thursday", visits: 366 },
{ day: "Friday", visits: 428 },
{ day: "Saturday", visits: 502 },
{ day: "Sunday", visits: 287 },
];
export function Example() {
return (
<PillRank
data={data}
name="day"
value="visits"
sort={false}
ranks={false}
highlight="Saturday"
title="The library had 502 visits on Saturday"
subtitle="Visits per day, one week in March"
note="Illustrative figures"
/>
);
}{
"type": "pill-rank",
"data": [
{ "day": "Monday", "visits": 312 },
{ "day": "Tuesday", "visits": 344 },
{ "day": "Wednesday", "visits": 371 },
{ "day": "Thursday", "visits": 366 },
{ "day": "Friday", "visits": 428 },
{ "day": "Saturday", "visits": 502 },
{ "day": "Sunday", "visits": 287 }
],
"name": "day",
"value": "visits",
"sort": false,
"ranks": false,
"highlight": "Saturday",
"title": "The library had 502 visits on Saturday",
"subtitle": "Visits per day, one week in March",
"note": "Illustrative figures"
}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 | Name field: one row per data row. | |
| valuerequired | string | Value field: pill width. Non-positive values are dropped. | |
| sort | boolean | true | Sort rows largest first. Set false to keep the data order. |
| compare | string[] | Names of rows that are not ranked: drawn below a dotted rule, without a rank number. | |
| compareLabel | string | Short heading over the comparison rows, e.g. "For comparison". | |
| max | number | Value that fills the full pill width. Default: the largest value. | |
| ranks | boolean | true | Show the rank number at the right edge. |
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>. |