Icon stat

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

Use when: A single proportion that is easier to read as people or units than as a percentage: 1 in 4, 3 in 10, 37 of 100. Round to a small denominator first.
Avoid when: Comparing several proportions (use bar chart), precise percentages (use big number), or fractions that need more than 100 units.

Preview

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

import { IconStat } from "insightcharts";

export function Example() {
  return (
    <IconStat
      icon="person"
      count={1}
      total={4}
      text="households could not cover an unexpected bill of €500 without borrowing."
    />
  );
}

{
  "type": "icon-stat",
  "icon": "person",
  "count": 1,
  "total": 4,
  "text": "households could not cover an unexpected bill of €500 without borrowing."
}

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

Composition

Used in

2 molecules, 1 template and 1 infographic use icon stat.

Molecules

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.

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.

Templates

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.

Directly, and throughProportion statement

Infographics

Atlas poster

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.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/icon-stat

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

Examples

Circles, 3 in 10

3 in 10new cars sold in Europe in 2024 had a plug.

import { IconStat } from "insightcharts";

export function Example() {
  return (
    <IconStat count={3} total={10} text="new cars sold in Europe in 2024 had a plug." />
  );
}

{
  "type": "icon-stat",
  "count": 3,
  "total": 10,
  "text": "new cars sold in Europe in 2024 had a plug."
}

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

Grid of 100

37%of the national grid's transmission lines are more than 40 years old.

import { IconStat } from "insightcharts";

export function Example() {
  return (
    <IconStat
      count={37}
      total={100}
      icon="square"
      value="37%"
      text="of the national grid's transmission lines are more than 40 years old."
      tone="negative"
    />
  );
}

{
  "type": "icon-stat",
  "count": 37,
  "total": 100,
  "icon": "square",
  "value": "37%",
  "text": "of the national grid's transmission lines are more than 40 years old.",
  "tone": "negative"
}

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

People, centered, custom value

Seven in tenrenters say they have delayed switching the heating on.

import { IconStat } from "insightcharts";

export function Example() {
  return (
    <IconStat
      icon="person"
      count={7}
      total={10}
      align="center"
      value="Seven in ten"
      text="renters say they have delayed switching the heating on."
      tone="neutral"
    />
  );
}

{
  "type": "icon-stat",
  "icon": "person",
  "count": 7,
  "total": 10,
  "align": "center",
  "value": "Seven in ten",
  "text": "renters say they have delayed switching the heating on.",
  "tone": "neutral"
}

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

Props

Prop	Type	Default	Description
countrequired	number		How many glyphs are filled.
total	number	10	How many glyphs are drawn. Capped at 100.
text	string		The sentence completing the figure.
children	ReactNode		JSX alternative to `text`.
value	string \| false		The figure as words. Defaults to "{count} in {total}"; `false` hides it.
icon	"circle" \| "person" \| "square" \| IconName	"circle"	Glyph per unit. Filled units are solid, the rest outlined. Any other icon name from `core/icons.ts` also works; its unfilled units are faded instead of outlined.
columns	number		Glyphs per row. Defaults to `total`, at most 10.
size	number		Glyph height in px; shrinks to fit narrow containers.
tone	"accent" \| "positive" \| "negative" \| "neutral"	"accent"	Fill colour by meaning.
align	"left" \| "center"	"left"	Alignment.