Proportion statement

A share stated as a countable sentence ("37 in every 100…"): a waffle grid or a row of icons beside the statement in large type, with the number emphasised.

Use when: One proportion that is easier to read as a count of people or units than as a percentage. Round to a small whole first: 1 in 4 with icons, 37 in every 100 with a waffle.
Avoid when: Several shares side by side (use bar chart, or waffle chart with categories); a precise percentage where the decimals matter (use big number); totals above 100.

Preview

33 in every 100 people in the world have never used the internet.

That was about 2.6 billion people in 2023.

Source: ITU Facts and Figures 2023 · Figures are approximate, for illustration

import { ProportionStatement } from "insightcharts";

export function Example() {
  return (
    <ProportionStatement
      value={33}
      total={100}
      text="people in the world have never used the internet."
      detail="That was about 2.6 billion people in 2023."
      source="ITU Facts and Figures 2023"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "proportion-statement",
  "value": 33,
  "total": 100,
  "text": "people in the world have never used the internet.",
  "detail": "That was about 2.6 billion people in 2023.",
  "source": "ITU Facts and Figures 2023",
  "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

Built from

The pieces proportion statement renders or expects in its slots.

Atoms

Icon stat

A "1 in 4"-style statement: a row or grid of simple glyphs with some filled, and the sentence they illustrate.

Waffle chart

Shows shares of a whole as counted cells in a grid, such as 37 in every 100.

Used in

1 template uses proportion statement.

Templates

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/proportion-statement

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

Examples

Icons, 1 in 4

1 in 4 households could not cover an unexpected bill of €500 without borrowing.

Source: Eurostat, EU-SILC 2023 · Figures are approximate, for illustration

import { ProportionStatement } from "insightcharts";

export function Example() {
  return (
    <ProportionStatement
      value={1}
      total={4}
      text="households could not cover an unexpected bill of €500 without borrowing."
      source="Eurostat, EU-SILC 2023"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "proportion-statement",
  "value": 1,
  "total": 4,
  "text": "households could not cover an unexpected bill of €500 without borrowing.",
  "source": "Eurostat, EU-SILC 2023",
  "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.

Icons on the right, custom figure

Nine in ten new cars sold in Norway in 2024 were fully electric.

Battery-electric models were 89% of registrations in 2024. They were 82% in 2023.

Source: Norwegian Road Federation (OFV) · Figures are approximate, for illustration

import { ProportionStatement } from "insightcharts";

export function Example() {
  return (
    <ProportionStatement
      value={9}
      total={10}
      figure="Nine in ten"
      icon="circle"
      side="right"
      text="new cars sold in Norway in 2024 were fully electric."
      detail="Battery-electric models were 89% of registrations in 2024. They were 82% in 2023."
      source="Norwegian Road Federation (OFV)"
      note="Figures are approximate, for illustration"
    />
  );
}

{
  "type": "proportion-statement",
  "value": 9,
  "total": 10,
  "figure": "Nine in ten",
  "icon": "circle",
  "side": "right",
  "text": "new cars sold in Norway in 2024 were fully electric.",
  "detail": "Battery-electric models were 89% of registrations in 2024. They were 82% in 2023.",
  "source": "Norwegian Road Federation (OFV)",
  "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.

Waffle with circles

12 in every 100 adults in the survey had changed jobs in the past year.

Illustrative data

import { ProportionStatement } from "insightcharts";

export function Example() {
  return (
    <ProportionStatement
      value={12}
      total={100}
      shape="circle"
      text="adults in the survey had changed jobs in the past year."
      note="Illustrative data"
    />
  );
}

{
  "type": "proportion-statement",
  "value": 12,
  "total": 100,
  "shape": "circle",
  "text": "adults in the survey had changed jobs in the past year.",
  "note": "Illustrative data"
}

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

Props

Prop	Type	Default	Description
valuerequired	number		How many of the whole are counted.
total	number	100	The whole.
figure	string		The emphasised words. Default: "{value} in every {total}", or "{value} in {total}" up to 20.
textrequired	string		The rest of the sentence, read straight after the figure.
visual	"waffle" \| "icons"		Grid of cells or row of glyphs. Default: icons up to a total of 20, waffle above.
icon	"circle" \| "person" \| "square"	"person"	Glyph for the `icons` visual.
shape	"square" \| "circle"	"square"	Cell shape for the `waffle` visual.
side	"left" \| "right"	"left"	Side the visual sits on; under 520px it goes on top.
detail	string		A second, quieter sentence under the statement.
source	string		Shown under the statement as "Source: ...".
note	string		Method note or caveat.
theme	ThemeInput		Theme override, passed on to the visual.
mode	"auto" \| "system" \| "light" \| "dark"	"auto"	Colour mode.