Segmented bar

Splits one whole into proportional segments along a single horizontal bar.

Use when: A compact part-to-whole for cards, table cells and stat rows: budget split, device mix, vote share. The legend carries names in block order.
Avoid when: Comparing compositions across several groups (use bar chart with stack "percent"); more than about 6 parts or many slivers (use bar chart); when the reader should count units (use waffle chart).

Preview

Labour won 411 of 650 seats in the 2024 general election

Seats in the House of Commons by party after the 2024 general election

Source: House of Commons Library · Figures are approximate, for illustration

import { SegmentedBar } from "insightcharts";

const data = [
  { party: "Labour", seats: 411 },
  { party: "Conservative", seats: 121 },
  { party: "Liberal Democrat", seats: 72 },
  { party: "SNP", seats: 9 },
  { party: "Others", seats: 37 },
];

export function Example() {
  return (
    <SegmentedBar
      data={data}
      name="party"
      value="seats"
      title="Labour won 411 of 650 seats in the 2024 general election"
      subtitle="Seats in the House of Commons by party after the 2024 general election"
      source="House of Commons Library"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "segmented-bar",
  "data": [
    { "party": "Labour", "seats": 411 },
    { "party": "Conservative", "seats": 121 },
    { "party": "Liberal Democrat", "seats": 72 },
    { "party": "SNP", "seats": 9 },
    { "party": "Others", "seats": 37 }
  ],
  "name": "party",
  "value": "seats",
  "title": "Labour won 411 of 650 seats in the 2024 general election",
  "subtitle": "Seats in the House of Commons by party after the 2024 general election",
  "source": "House of Commons Library",
  "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

2 molecules and 2 templates use segmented bar.

Molecules

Metric breakdown

A headline number with its composition underneath: one segmented bar and a key giving each part's value and share.

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.

Templates

Comparison brief

A compared with B on one page. It has a headline that states the result, the headline figures mirrored either side of their labels, one hero exhibit that shows both sides, paired exhibits on a shared scale, a verdict callout and a source note.

Explainer

A vertical infographic in one narrow column. It opens with a big number or a proportion statement (hook), then the hero exhibit, then numbered sections with one exhibit each, a conclusion with an optional link, and sources.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/segmented-bar

The 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 { SegmentedBar } from "insightcharts";

Examples

Thin, for cards

Mobile accounted for 61% of sessions in the last 30 days

Sessions by device, last 30 days

import { SegmentedBar } from "insightcharts";

const data = [
  { device: "Mobile", sessions: 58200 },
  { device: "Desktop", sessions: 31400 },
  { device: "Tablet", sessions: 6100 },
];

export function Example() {
  return (
    <SegmentedBar
      data={data}
      name="device"
      value="sessions"
      size="thin"
      title="Mobile accounted for 61% of sessions in the last 30 days"
      subtitle="Sessions by device, last 30 days"
    />
  );
}

{
  "type": "segmented-bar",
  "data": [
    { "device": "Mobile", "sessions": 58200 },
    { "device": "Desktop", "sessions": 31400 },
    { "device": "Tablet", "sessions": 6100 }
  ],
  "name": "device",
  "value": "sessions",
  "size": "thin",
  "title": "Mobile accounted for 61% of sessions in the last 30 days",
  "subtitle": "Sessions by device, last 30 days"
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

With highlight

Housing was 33% of US consumer spending in 2023

Share of annual consumer spending, United States, 2023

Source: BLS Consumer Expenditure Survey · Figures are approximate, for illustration

import { SegmentedBar } from "insightcharts";

const data = [
  { item: "Housing", spend: 33 },
  { item: "Transport", spend: 17 },
  { item: "Food", spend: 13 },
  { item: "Healthcare", spend: 8 },
  { item: "Everything else", spend: 29 },
];

export function Example() {
  return (
    <SegmentedBar
      data={data}
      name="item"
      value="spend"
      highlight="Housing"
      title="Housing was 33% of US consumer spending in 2023"
      subtitle="Share of annual consumer spending, United States, 2023"
      source="BLS Consumer Expenditure Survey"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "segmented-bar",
  "data": [
    { "item": "Housing", "spend": 33 },
    { "item": "Transport", "spend": 17 },
    { "item": "Food", "spend": 13 },
    { "item": "Healthcare", "spend": 8 },
    { "item": "Everything else", "spend": 29 }
  ],
  "name": "item",
  "value": "spend",
  "highlight": "Housing",
  "title": "Housing was 33% of US consumer spending in 2023",
  "subtitle": "Share of annual consumer spending, United States, 2023",
  "source": "BLS Consumer Expenditure Survey",
  "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 parts, long names, slivers

Cardiovascular diseases cause 19.8 million deaths a year

Deaths by cause, world, millions per year

Source: IHME Global Burden of Disease · Rounded, approximate figures for illustration

import { SegmentedBar } from "insightcharts";

const data = [
  { cause: "Cardiovascular diseases", deaths: 19.8 },
  { cause: "Cancers", deaths: 10 },
  { cause: "Chronic respiratory diseases", deaths: 4 },
  { cause: "Digestive diseases", deaths: 2.6 },
  { cause: "Lower respiratory infections", deaths: 2.2 },
  { cause: "Neonatal disorders", deaths: 1.8 },
  { cause: "Alzheimer's disease and other dementias", deaths: 1.8 },
  { cause: "Diabetes", deaths: 1.6 },
  { cause: "Diarrhoeal diseases", deaths: 1.2 },
  { cause: "Road injuries", deaths: 1.2 },
  { cause: "Malaria", deaths: 0.6 },
];

export function Example() {
  return (
    <SegmentedBar
      data={data}
      name="cause"
      value="deaths"
      format={"{value}m"}
      title="Cardiovascular diseases cause 19.8 million deaths a year"
      subtitle="Deaths by cause, world, millions per year"
      source="IHME Global Burden of Disease"
      note="Rounded, approximate figures for illustration"
    />
  );
}

{
  "type": "segmented-bar",
  "data": [
    { "cause": "Cardiovascular diseases", "deaths": 19.8 },
    { "cause": "Cancers", "deaths": 10 },
    { "cause": "Chronic respiratory diseases", "deaths": 4 },
    { "cause": "Digestive diseases", "deaths": 2.6 },
    { "cause": "Lower respiratory infections", "deaths": 2.2 },
    { "cause": "Neonatal disorders", "deaths": 1.8 },
    { "cause": "Alzheimer's disease and other dementias", "deaths": 1.8 },
    { "cause": "Diabetes", "deaths": 1.6 },
    { "cause": "Diarrhoeal diseases", "deaths": 1.2 },
    { "cause": "Road injuries", "deaths": 1.2 },
    { "cause": "Malaria", "deaths": 0.6 }
  ],
  "name": "cause",
  "value": "deaths",
  "format": "{value}m",
  "title": "Cardiovascular diseases cause 19.8 million deaths a year",
  "subtitle": "Deaths by cause, world, millions per year",
  "source": "IHME Global Burden of Disease",
  "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.

Props

Prop	Type	Default	Description
namerequired	string		Category field: one segment per distinct value.
valuerequired	string		Value field.
size	"tall" \| "thin"	"tall"	28px with shares printed inside where they fit, or 8px unlabelled.
sort	"none" \| "desc"	"none"	Segment order; the legend follows it.
names	Record<string, string>		Display names for category 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>`.