Metric breakdown

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

Use when: A total that the reader will immediately want split: a budget by department, revenue by product line, emissions by sector. Two to six parts that add up to the number above them.
Avoid when: Parts that do not sum to the headline; more than about six parts (use bar chart); composition compared across groups or over time (use bar chart with stack: "percent" or area chart).

Preview

Greenhouse gas emissions, EU-27, 2022

3,291

Million tonnes of CO2 equivalent. 31% below the 1990 level.

Energy supply: 86226%
Transport: 80424%
Industry: 70121%
Buildings: 43713%
Agriculture: 37811%
Waste: 1093%

Source: European Environment Agency · Rounded, approximate figures for illustration

import { MetricBreakdown } from "insightcharts";

const data = [
  { sector: "Energy supply", mt: 862 },
  { sector: "Transport", mt: 804 },
  { sector: "Industry", mt: 701 },
  { sector: "Buildings", mt: 437 },
  { sector: "Agriculture", mt: 378 },
  { sector: "Waste", mt: 109 },
];

export function Example() {
  return (
    <MetricBreakdown
      label="Greenhouse gas emissions, EU-27, 2022"
      context="Million tonnes of CO2 equivalent. 31% below the 1990 level."
      data={data}
      name="sector"
      value="mt"
      format="integer"
      source="European Environment Agency"
      note="Rounded, approximate figures for illustration"
    />
  );
}

{
  "type": "metric-breakdown",
  "label": "Greenhouse gas emissions, EU-27, 2022",
  "context": "Million tonnes of CO2 equivalent. 31% below the 1990 level.",
  "data": [
    { "sector": "Energy supply", "mt": 862 },
    { "sector": "Transport", "mt": 804 },
    { "sector": "Industry", "mt": 701 },
    { "sector": "Buildings", "mt": 437 },
    { "sector": "Agriculture", "mt": 378 },
    { "sector": "Waste", "mt": 109 }
  ],
  "name": "sector",
  "value": "mt",
  "format": "integer",
  "source": "European Environment Agency",
  "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

Built from

The pieces metric breakdown renders or expects in its slots.

Atoms

Big number

A featured statistic with its label, change and the context that gives it meaning.

Segmented bar

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

Used in

No template lists metric breakdown in its composes. It still fits any slot that takes a component.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/metric-breakdown

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

Examples

Three parts, shares only

Monthly recurring revenue

$589K

+6.4% vs September

Enterprise: 54%
Team: 34%
Starter: 12%

Illustrative data

import { MetricBreakdown } from "insightcharts";

const data = [
  { plan: "Enterprise", mrr: 318000 },
  { plan: "Team", mrr: 201000 },
  { plan: "Starter", mrr: 70000 },
];

export function Example() {
  return (
    <MetricBreakdown
      label="Monthly recurring revenue"
      delta={0.064}
      deltaLabel="vs September"
      data={data}
      name="plan"
      value="mrr"
      format="currency:USD"
      show="share"
      note="Illustrative data"
      style={{ maxWidth: 420 }}
    />
  );
}

{
  "type": "metric-breakdown",
  "label": "Monthly recurring revenue",
  "delta": 0.064,
  "deltaLabel": "vs September",
  "data": [
    { "plan": "Enterprise", "mrr": 318000 },
    { "plan": "Team", "mrr": 201000 },
    { "plan": "Starter", "mrr": 70000 }
  ],
  "name": "plan",
  "value": "mrr",
  "format": "currency:USD",
  "show": "share",
  "note": "Illustrative data",
  "style": { "maxWidth": 420 }
}

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

Hero, sorted

Seats in the House of Commons, 2024

650

Labour: 41163%
Conservative: 12119%
Liberal Democrat: 7211%
Others: 376%
SNP: 91%

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

import { MetricBreakdown } from "insightcharts";

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

export function Example() {
  return (
    <MetricBreakdown
      size="hero"
      sort="desc"
      label="Seats in the House of Commons, 2024"
      data={data}
      name="party"
      value="seats"
      source="House of Commons Library"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "metric-breakdown",
  "size": "hero",
  "sort": "desc",
  "label": "Seats in the House of Commons, 2024",
  "data": [
    { "party": "Conservative", "seats": 121 },
    { "party": "Labour", "seats": 411 },
    { "party": "Liberal Democrat", "seats": 72 },
    { "party": "SNP", "seats": 9 },
    { "party": "Others", "seats": 37 }
  ],
  "name": "party",
  "value": "seats",
  "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.

Props

Prop	Type	Default	Description
labelrequired	string		What the headline number measures.
data	DataInput		One row per part. Omit inside `<InsightData>`.
transform	Transform \| Transform[]		Applied before the parts are summed.
namerequired	string		Field naming each part.
valuerequired	string		Field with each part's value.
total	number \| string		The headline number. Default: the sum of the parts.
context	string		The line under the headline number.
delta	number \| string		Change in the headline number. Numbers render as signed percentages.
deltaLabel	string		What the delta is against.
upIsGood	boolean	true	Whether an increase is good news.
size	"hero" \| "stat"	"stat"	`hero` when this opens a piece.
show	"both" \| "value" \| "share"	"both"	What the key prints beside each part.
sort	"none" \| "desc"	"none"	Order parts by size; the bar and the key follow.
names	Record<string, string>		Display names for part keys.
format	FormatSpec	"auto"	Number format for the headline and the parts.
source	string		Shown underneath as "Source: ...".
note	string		Method note or caveat.
theme	ThemeInput		Theme override, passed on to the number and the bar.
mode	"auto" \| "system" \| "light" \| "dark"	"auto"	Colour mode.