Callout

A boxed statement of fact with a short bold lead and a sentence of explanation. The tone is marked by icon and tint.

Use when: Beside or under a chart, to state its main fact in words, with the number. Also for a caveat the reader must not miss (negative).
Avoid when: Long narration (use prose), a featured number (use big number or stat tile), or more than one callout per chart.

Preview

Summary

Solar supplied more than half of demand on 4 in 10 summer afternoons in 2024

Wholesale prices were below zero on those afternoons.

import { Callout } from "insightcharts";

export function Example() {
  return (
    <Callout
      tone="accent"
      label="Summary"
      lead="Solar supplied more than half of demand on 4 in 10 summer afternoons in 2024"
      text="Wholesale prices were below zero on those afternoons."
    />
  );
}

{
  "type": "callout",
  "tone": "accent",
  "label": "Summary",
  "lead": "Solar supplied more than half of demand on 4 in 10 summer afternoons in 2024",
  "text": "Wholesale prices were below zero on those afternoons."
}

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

Composition

Used in

1 molecule and 5 templates use callout.

Molecules

Chart with callout

A chart with a callout beside it that states the main fact. In narrow containers the callout goes underneath.

Templates

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.

Data explorer

A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.

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.

Executive brief

A one-page summary. It has a headline that states the main finding with its number, a deck, a row of three or four key figures, one hero chart with a takeaway callout, two smaller supporting exhibits, a short list of actions and a source note.

ThroughChart with callout

Visual essay

A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.

ThroughChart with callout

Installation

$ pnpm dlx shadcn@latest add @insightcharts/callout

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

Examples

Positive

Monthly churn fell from 4.2% to 2.1% between January and June

It has stayed at 2.1% for two quarters since.

import { Callout } from "insightcharts";

export function Example() {
  return (
    <Callout
      tone="positive"
      lead="Monthly churn fell from 4.2% to 2.1% between January and June"
      text="It has stayed at 2.1% for two quarters since."
    />
  );
}

{
  "type": "callout",
  "tone": "positive",
  "lead": "Monthly churn fell from 4.2% to 2.1% between January and June",
  "text": "It has stayed at 2.1% for two quarters since."
}

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

Negative caveat, outline

Caveat

2020 figures are not comparable

The survey moved online during lockdown. Response rates among over-75s fell by a third. Treat 2020 as a break in the series.

import { Callout } from "insightcharts";

export function Example() {
  return (
    <Callout
      tone="negative"
      variant="outline"
      label="Caveat"
      lead="2020 figures are not comparable"
      text="The survey moved online during lockdown. Response rates among over-75s fell by a third. Treat 2020 as a break in the series."
    />
  );
}

{
  "type": "callout",
  "tone": "negative",
  "variant": "outline",
  "label": "Caveat",
  "lead": "2020 figures are not comparable",
  "text": "The survey moved online during lockdown. Response rates among over-75s fell by a third. Treat 2020 as a break in the series."
}

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

Neutral, plain

Figures are provisional until the statistical office publishes its annual revision in September.

import { Callout } from "insightcharts";

export function Example() {
  return (
    <Callout
      tone="neutral"
      variant="plain"
      text="Figures are provisional until the statistical office publishes its annual revision in September."
    />
  );
}

{
  "type": "callout",
  "tone": "neutral",
  "variant": "plain",
  "text": "Figures are provisional until the statistical office publishes its annual revision in September."
}

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

Props

Prop	Type	Default	Description
lead	string		The fact in a few bold words. State it with its number.
text	string		One sentence of explanation or evidence.
children	ReactNode		JSX alternative to `text`.
tone	"neutral" \| "positive" \| "negative" \| "accent"	"neutral"	Sets the icon shape and the tint together.
label	string		Small label above the lead, e.g. "Summary".
variant	"soft" \| "outline" \| "plain"	"soft"	Tinted box, bordered box, or no box.