Delta

An inline change indicator: direction arrow, signed value and an optional baseline label.

Use when: Next to a figure, in a sentence, a table cell or a tile, to say how much it changed and against what. Set upIsGood: false for measures where a fall is the good news (churn, emissions, wait times).
Avoid when: Standing alone as the main figure (use big number or stat tile, which include a delta). Do not omit the baseline label unless the surrounding text names it.

Preview

Up +12.4%vs last quarter

import { Delta } from "insightcharts";

export function Example() {
  return (
    <Delta value={0.124} label="vs last quarter" size="md" />
  );
}

{ "type": "delta", "value": 0.124, "label": "vs last quarter", "size": "md" }

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

Composition

Used in

3 molecules and 1 template use delta.

Molecules

Before and after

Two states of one measure side by side, as figures or small charts, with the change between them stated in the middle.

Comparison table

A table whose rows carry inline sparklines, deltas and in-cell bars beside their exact values, from rows and a column config.

Ranked list

A ranking as a list: position, name, value and a thin in-row bar, with an optional change indicator and highlighted rows.

Templates

A recurring report. It has a masthead with the report name and period, a headline that states the main change, a KPI grid with changes and sparklines, a ranked list beside one or two trend charts, an optional comparison table, short notes and a source note.

ThroughComparison table Ranked list

Installation

$ pnpm dlx shadcn@latest add @insightcharts/delta

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

Examples

Down is good (churn)

Down −2.1%monthly churn vs January

import { Delta } from "insightcharts";

export function Example() {
  return (
    <Delta value={-0.021} label="monthly churn vs January" upIsGood={false} size="md" />
  );
}

{
  "type": "delta",
  "value": -0.021,
  "label": "monthly churn vs January",
  "upIsGood": false,
  "size": "md"
}

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

Down is bad, pill

Down −1,840net subscribers this month

import { Delta } from "insightcharts";

export function Example() {
  return (
    <Delta
      value={-1840}
      format="signed"
      label="net subscribers this month"
      variant="pill"
      size="md"
    />
  );
}

{
  "type": "delta",
  "value": -1840,
  "format": "signed",
  "label": "net subscribers this month",
  "variant": "pill",
  "size": "md"
}

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

No change

No change 0%vs 2023

import { Delta } from "insightcharts";

export function Example() {
  return (
    <Delta value={0} label="vs 2023" size="md" />
  );
}

{ "type": "delta", "value": 0, "label": "vs 2023", "size": "md" }

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

String value, large pill

Up 3 placesin the regional ranking

import { Delta } from "insightcharts";

export function Example() {
  return (
    <Delta
      value="3 places"
      direction="up"
      label="in the regional ranking"
      variant="pill"
      size="lg"
    />
  );
}

{
  "type": "delta",
  "value": "3 places",
  "direction": "up",
  "label": "in the regional ranking",
  "variant": "pill",
  "size": "lg"
}

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 \| string		The change. Numbers format as signed percentages by default (0.12 is +12%).
label	string		The baseline, e.g. "vs last quarter".
upIsGood	boolean	true	Whether an increase is good news; decides the colour only.
direction	"up" \| "down" \| "flat"		Override the direction inferred from the sign.
format	FormatSpec	signed percent	Number format, e.g. `"signed"` for absolute changes or `"{value} pts"`.
size	"sm" \| "md" \| "lg"		12, 14 or 16px. Inherits the surrounding size when omitted.
variant	"text" \| "pill"	"text"	`pill` adds a tinted capsule behind the value.