Skip to content
KONIGI Patterns

Dashboards / Key measures / Delta indicator

1 of 7 ›

Delta indicator

People need to see how much a value changed and what it was compared with.

Updated September 9, 2026

Problem

A value alone does not tell people how it has changed or what they should compare it with.

Solution

Place a smaller change value beside the main number. Name the comparison period or target and use comparable time windows.

Label whether the difference is an amount, a percent change, or a change in percentage points. These measures answer different questions and should not be used interchangeably.

If color indicates good or bad, define that meaning for the metric. A rise in errors should not receive the same positive treatment as a rise in revenue. Include text or a symbol so color is not the only cue.

Use when

The metric has a useful comparison and people need a quick reading of the change.

Don’t use when

The series is too noisy for a two-point comparison to mean anything. If the metric routinely swings 30% hour to hour, a delta reports noise with the same confidence it would report a trend. Show the shape instead.

Trade-offs

A delta hides what happened between its endpoints. Percent changes can look dramatic when the starting value is small, and a zero starting value needs special handling. A misleading comparison can make an otherwise correct calculation unhelpful.

Checklist

  • What exactly is this compared against, and can the viewer see that without asking?
  • Is the comparison window the same length as the current window?
  • Does the comparison respect weekly and seasonal shape, or does it manufacture a Monday crash?
  • Percent or percentage points, and is the label unambiguous about which?
  • What is the denominator, and is it large enough for a percentage to mean anything?
  • Does color encode good and bad rather than up and down?
  • What happens when the prior period had a zero, or no data at all?
  • Is the arrow redundant with the sign, and if so, is it earning its space?
  • Does the delta round to more precision than the underlying data supports?
  • Who can change the comparison basis, and does changing it change any alert?

Compare

Grafana ships percent change as a stat panel toggle and doesn’t document the comparison basis, which makes it easy to put on a wall and hard to defend in a review. Sentry frames the delta as a comparison between two named periods on the issue and release views, so the base is on screen rather than implied, which is the right instinct even when it costs space. Stripe draws the prior period as a ghost line behind the current one instead of reducing it to a badge, turning the comparison into a shape the viewer reads directly. Plausible puts the percentage next to every top-line number and keeps the comparison window locked to whatever the page filter says, so the delta can never disagree with the chart above it.

KPI tile commonly contains the indicator. Compare periods shows both periods in detail. Sparkline reveals changes between the endpoints.

Semantic status color expresses good or bad. Red/green direction coloring expresses movement and needs a clear convention.

Delta indicator anatomy A KPI tile broken into four numbered parts: label, value, delta badge and comparison base. Below, the same one-point change in an error rate written three ways: plus 1.0 percentage points, plus 50 percent, and plus 0.010 absolute. Anatomy Orders today 1 4,182 2 12.4% 3 vs. same day last week 4 1 LABEL What the viewer calls it, not the column name. 2 VALUE Tabular figures, so the row doesn’t jitter. 3 DELTA Direction and magnitude. Colour encodes good and bad, never up and down. 4 BASE The part almost every tile omits. One change, three honest numbers An error rate moved from 2.0% to 3.0%. +1.0 pp Percentage points +50% Percent change +0.010 Absolute All three describe the same movement. Only one of them sounds like an incident.
Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

A delta without a window is not a fact. "+12%" against what—yesterday, last week, the same week last year? The comparison basis travels with the number or the number means nothing.

Tokens
--foreground--muted--muted-foreground--border--chart-1--direction-up

Orders today

4,182

+12.4%vs. same day last week

Delta.tsxThe window is a required prop. You cannot render a delta without one.

import { directionColor, directionGlyph, type Polarity } from "../red-green-direction/direction";

/**
 * `window` is required, and that is the whole design.
 *
 * A delta is a comparison, so the thing it is compared against is part of the
 * value rather than a caption someone might add later. Making it optional is
 * how dashboards end up covered in percentages nobody can act on, and the
 * compiler is a cheaper reviewer than a person.
 */
export function Delta({
  value,
  window,
  polarity = "higher-is-better",
}: {
  value: number;
  window: string;
  polarity?: Polarity;
}) {
  const pct = `${value > 0 ? "+" : ""}${value.toFixed(1)}%`;
  return (
    <p className="text-xs font-medium tabular-nums" style={{ color: directionColor(value, polarity) }}>
      <span aria-hidden="true">{directionGlyph(value)} </span>
      {pct}
      <span className="ml-1 font-normal text-muted-foreground">{window}</span>
    </p>
  );
}

demo.tsxHow it is called: value and the window it is measured against, beside a figure.

import { Delta } from "./Delta";

/** A delta beside the number it qualifies, naming what it is measured against. */
export default function Demo() {
  return (
    <div className="w-[272px] rounded-lg border bg-card p-5">
      <p className="text-xs text-muted-foreground">Orders today</p>
      <p className="mt-2 text-4xl font-bold tabular-nums tracking-tight text-foreground">4,182</p>
      <div className="mt-3">
        <Delta value={12.4} window="vs. same day last week" />
      </div>
    </div>
  );
}
What it renders. Identical markup in both panes, with only the token values changing.

Copy-paste: this implementation as plain text

Examples

Screenshots are grouped by product and include the capture date. Dashed boxes highlight this pattern. Notes appear below each screenshot and when you hover over a box.

Cloudflare Radar

Public internet-traffic dashboards with location and time controls and links from summaries to detailed views.

Cloudflare Radar — Worldwide Overview, dark
Dark-first data palette. The darker traffic series has less contrast against this background. Delta indicator. Red change labels remain prominent in both themes. Categorical series palette. The category colors stay the same across themes, but their visual prominence changes.
Worldwide Overview, dark September 11, 2026 Public site, signed out; no version string exposed medium · dark · desktop-web
This capture shows Radar’s dark theme alongside the light version captured minutes earlier. The traffic series use the same hues, but the darker blue is harder to distinguish from the dark background. The lighter segments in the stacked bars also stand out more. The red browser-change labels remain prominent in both themes. The pair shows why a palette needs testing on each background.
Show 3 more examples Hide the rest

Cloudflare Radar

Public internet-traffic dashboards with location and time controls and links from summaries to detailed views.

Cloudflare Radar — Worldwide Overview
Multi-page dashboard. The rail links to eleven sections and expands the current one. Compare periods. The dotted line shows the previous seven days on the same axes. Delta indicator. Each browser share has a change value beneath it. Overview then detail. Each summary links to a fuller page through its heading arrow. Ratio and rate. Both parts of the split are named and shown as percentages. Stacked composition. Four mitigation categories fill a 100% bar, with their values printed above it. Ranked list. This top-ten list shows rank without values.
Worldwide Overview September 11, 2026 Public site, signed out; no version string exposed medium · light · desktop-web
Radar’s overview uses location and time controls to set the scope of the page. Each summary panel links to a fuller section, making the page a starting point for further reading. Values are printed above the charts, so people can read figures without estimating them from marks. The bot and human shares, for example, are both labeled beside their bar.

Kraken Pro

A trading interface with price charts, an order book, and market-depth displays.

Kraken Pro — Trade / BTC-USD
Time series. Candles show opening, high, low, and closing values for each interval. Order book and depth. Buy and sell ladders show quantities with depth bars and a labeled spread. Red/green direction coloring. Asks are above the spread as well as colored red. Ratio and rate. The spread appears as both an amount and a percentage. Delta indicator. The price change includes an amount, percentage, and named period. Order book and depth. The price-increment control changes how levels are grouped.
Trade / BTC-USD September 11, 2026 Kraken Pro, signed out (public market data) dense · dark · desktop-web
The order book separates asks and bids by position as well as red and green. A labeled spread sits between them and includes both an absolute value and a percentage. Depth bars behind the rows help compare quantities that are difficult to scan as long decimal values. A price-increment control changes how orders are grouped into levels.

Grafana

Examples of panel grids, shared selectors, stat tiles, and chart configuration.

Grafana — Examples / Table
Data table. Narrow columns squeeze the bar and truncate text. Data table. Threshold colors help people scan the column for states. Sequential and diverging scales. A continuous color scale highlights differences down the column. Semantic status color. Value mappings pair named states with their colors. Delta indicator. Direction labels appear in a paginated table without a comparison amount.
Examples / Table September 10, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
The tables demonstrate colored cells, gradients, images, bars, pills, and richer text. Some treatments become less useful in narrow columns: a bar is squeezed into a thin strip and nearby text is cut off. Another table shows many pages of results alongside sort controls. The interface needs to make clear whether sorting applies to all returned records or a smaller subset.

Machine-readable: this page as markdown