Quote with figure

A pull-quote paired with the statistic or small chart that backs it up, side by side and stacking in narrow containers.

Use when: A quotation shown next to the number it refers to: an interview finding with its survey figure, an executive's statement with the metric. One per section.
Avoid when: A quote with no evidence (use pull quote); a figure that needs axes to read (use chart with callout and put the quote in prose); unattributed quotations.

Preview

“Solar met more than half of demand on 41% of summer afternoons in 2024. We do not have enough storage for the midday surplus yet.”

Marta KellerGrid planner, quoted in the 2024 system adequacy review

Source: National grid operator, hourly generation data · Illustrative data

import { QuoteFigure, registerAll } from "insightcharts";

// The slot props below are JSON specs. This makes their `type` names resolvable.
registerAll();

export function Example() {
  return (
    <QuoteFigure
      quote="Solar met more than half of demand on 41% of summer afternoons in 2024. We do not have enough storage for the midday surplus yet."
      attribution="Marta Keller"
      role="Grid planner, quoted in the 2024 system adequacy review"
      stat={{
        value: 0.41,
        format: "percent",
        label: "Summer afternoons when solar met over half of demand",
        context: "It was 6% of afternoons in 2019",
      }}
      figure={{
        type: "sparkline",
        data: [
          { year: "2019", share: 6 },
          { year: "2020", share: 9 },
          { year: "2021", share: 14 },
          { year: "2022", share: 22 },
          { year: "2023", share: 31 },
          { year: "2024", share: 41 },
        ],
        x: "year",
        y: "share",
        format: "{value}%",
        area: true,
      }}
      source="National grid operator, hourly generation data"
      note="Illustrative data"
    />
  );
}

{
  "type": "quote-figure",
  "quote": "Solar met more than half of demand on 41% of summer afternoons in 2024. We do not have enough storage for the midday surplus yet.",
  "attribution": "Marta Keller",
  "role": "Grid planner, quoted in the 2024 system adequacy review",
  "stat": {
    "value": 0.41,
    "format": "percent",
    "label": "Summer afternoons when solar met over half of demand",
    "context": "It was 6% of afternoons in 2019"
  },
  "figure": {
    "type": "sparkline",
    "data": [
      { "year": "2019", "share": 6 },
      { "year": "2020", "share": 9 },
      { "year": "2021", "share": 14 },
      { "year": "2022", "share": 22 },
      { "year": "2023", "share": 31 },
      { "year": "2024", "share": 41 }
    ],
    "x": "year",
    "y": "share",
    "format": "{value}%",
    "area": true
  },
  "source": "National grid operator, hourly generation data",
  "note": "Illustrative data"
}

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

Composition

Built from

The pieces quote with figure renders or expects in its slots.

Atoms

Big number

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

Pull quote

A large quotation with its attribution.

Sparkline

A word-sized line or bar series without axes, with the latest point marked.

Used in

No template lists quote with figure in its composes. It still fits any slot that takes a component.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/quote-figure

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

Examples

Evidence on the left, statistic only

“Most of the customers who left told us they stopped at the second screen of setup.”

Dana WhitfieldHead of customer research

import { QuoteFigure } from "insightcharts";

export function Example() {
  return (
    <QuoteFigure
      side="left"
      quote="Most of the customers who left told us they stopped at the second screen of setup."
      attribution="Dana Whitfield"
      role="Head of customer research"
      stat={{
        value: 0.58,
        format: "percent",
        label: "Churned accounts that never finished setup",
        delta: "−21 pts",
        deltaLabel: "after the redesign",
        upIsGood: false,
      }}
    />
  );
}

{
  "type": "quote-figure",
  "side": "left",
  "quote": "Most of the customers who left told us they stopped at the second screen of setup.",
  "attribution": "Dana Whitfield",
  "role": "Head of customer research",
  "stat": {
    "value": 0.58,
    "format": "percent",
    "label": "Churned accounts that never finished setup",
    "delta": "−21 pts",
    "deltaLabel": "after the redesign",
    "upIsGood": false
  }
}

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

Props

Prop	Type	Default	Description
quoterequired	string		The words quoted, without quotation marks.
attribution	string		Who said it.
role	string		Their role, or where it was said.
cite	string		Source URL, linked from the attribution.
stat	{ value, label, context?, delta?, deltaLabel?, upIsGood?, format? }		The statistic that backs the quote up; takes the props of `big-number`.
figure	Slot		A small chart or figure instead of, or under, the statistic: a spec or a React element.
side	"left" \| "right"	"right"	Side the evidence sits on; under 640px it goes underneath.
source	string		Shown underneath as "Source: ...".
note	string		Method note or caveat.
theme	ThemeInput		Theme override, passed on to the quote and the figure.
mode	"auto" \| "system" \| "light" \| "dark"	"auto"	Colour mode.