Skip to content
KONIGI

Dashboards / Data information / Delta indicator

1 of 7 ›

Delta indicator

A number means nothing until the viewer knows which way it moved and by how much.

Updated September 9, 2026

Problem

The viewer is looking at 4,182. They have no idea whether that is good, and no idea whether to care, because a value with nothing to compare it against is trivia.

Solution

Put a second, smaller number next to the first saying how it changed. Three decisions sit inside that, and dashboards routinely get all three wrong at once.

What it’s compared against. Previous period, same period last week, same period last year, or a fixed target. Traffic has a weekly shape, so comparing Monday to Sunday manufactures a crash every week. Whatever the base is, it has to be the same length as the current window or the comparison is arithmetic dressed as insight.

How the change is expressed. Absolute, percent, or percentage points, and the last two are not the same thing. An error rate moving from 2% to 3% rose by one percentage point and by fifty percent. Both are true, one sounds like a bad afternoon and the other sounds like an incident, and the tile usually picks whichever the query happened to produce.

What the direction means. Up is not good. Up is good for revenue and bad for p99, and the color has to encode good and bad rather than up and down. A green arrow on a rising error rate is worse than no indicator at all, because the viewer trusts the color faster than they read the label.

Grafana’s stat panel has a “Show percent change” option, off by default. The documentation says only “Set whether percent change is displayed or not” and never states which two values it compares, which is the whole question. Anyone reading the tile is trusting a comparison basis the product declines to name.

Use when

The viewer checks this number regularly enough to have expectations about it, and there is a defensible thing to compare it against.

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 is two numbers pretending to be one relationship, and it discards everything in between. A value that dipped hard and recovered reads identically to one that never moved. It also invites over-reading of small windows, because a percentage computed on a small base produces large, meaningless numbers: three errors up from one is +200%. And once colored, the delta starts driving behavior on its own, which is fine until the comparison base is wrong and nobody has looked at it in a year.

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 is the container this almost always lives in, and the two are usually specified together. Compare periods is the same idea given a whole page instead of a badge. Sparkline is the other way to supply context, and it answers the question a delta can’t, which is what happened in between. Semantic status color and red/green direction coloring are where the good-versus-bad decision actually gets encoded, and where it goes wrong.

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

Captures whose hotspots reference this pattern, grouped by product and dated. The dashed boxes are this pattern; hover any box for the note.

Cloudflare Radar

A public dashboard with no account, no filters worth the name, and an audience of journalists. Designed for people who will read one number and leave.

Cloudflare Radar — Worldwide Overview, dark
Dark-first data palette. Same two hues as the light capture. On charcoal the darker series is the one fighting the ground. Delta indicator. The one colour that reads the same on both grounds, because it is carrying meaning rather than identity. Categorical series palette. Four categories, four fixed hues, held across both grounds. Which one dominates the eye is not held.
Worldwide Overview, dark September 11, 2026 Public site, signed out; no version string exposed medium · dark · desktop-web
The same page and the same figures, captured minutes apart on the other ground. Only the promotional strip at the top differs, and it rotates. Radar is worth the pair because it does not restate its palette in the dark: the hues are the same, and what changes is how much light each one carries against what is behind it. In the traffic chart the dark blue that reads as the heavier of the two series on white is now the one closest to the background, and the pale blue that was the quiet one carries the chart. The stacked attack bars show the milder version of the same thing—WAF still holds the largest share and still looks it, but the lighter segment beside it pulls more attention than its 39.7% has earned. The red on the browser deltas is the one colour that reads the same on both grounds, which is what you want from a colour carrying meaning and what a colour carrying identity cannot promise.
  • Dark-first data palette Same two hues as the light capture. On charcoal the darker series is the one fighting the ground.
  • Categorical series palette Four categories, four fixed hues, held across both grounds. Which one dominates the eye is not held.
  • Delta indicator The one colour that reads the same on both grounds, because it is carrying meaning rather than identity.
Show 3 more examples Hide the rest

Cloudflare Radar

A public dashboard with no account, no filters worth the name, and an audience of journalists. Designed for people who will read one number and leave.

Cloudflare Radar — Worldwide Overview
Multi-page dashboard. Eleven sections behind one rail, with the open one expanded in place. Radar is a site of dashboards, not a dashboard. Compare periods. The dotted series is the previous seven days, drawn on the same axis rather than beside it. Delta indicator. Eight shares with their change under them, all of them fractions of a point, which tells you how still this data is. Overview then detail. Two summaries and an arrow each. The panel exists to tell you whether the full page is worth opening. Ratio and rate. Shares only, never counts, and both sides of the split are named so the denominator is never in doubt. Stacked composition. Four mitigation techniques to 100%. The bar is almost redundant next to the printed figures, which is the point. Ranked list. A top ten with no magnitudes at all. The rank is the whole finding.
Worldwide Overview September 11, 2026 Public site, signed out; no version string exposed medium · light · desktop-web
Radar is a dashboard for people who did not come to use a dashboard. The audience is journalists, researchers and the merely curious, nobody has an account, and the design follows from that in two ways worth copying. Two controls scope the whole page—where, and when—and neither is a filter in the sense the rest of this gallery means it; the only other selector on the page sits inside the traffic panel. Everything else that looks like a control is a link. Each panel is a standing summary of a section that has its own full page behind the arrow in its heading, so the overview works as a table of contents rather than a filtered view of one dataset. And almost every value is printed as text above the chart that encodes it: "Bot 57.9%, Human 42.1%" sits over the bar rather than inside it. You can read the number without reading the chart, which is the right trade when most of your readers will take one figure and leave.
  • Multi-page dashboard Eleven sections behind one rail, with the open one expanded in place. Radar is a site of dashboards, not a dashboard.
  • Compare periods The dotted series is the previous seven days, drawn on the same axis rather than beside it.
  • Overview then detail Two summaries and an arrow each. The panel exists to tell you whether the full page is worth opening.
  • Ratio and rate Shares only, never counts, and both sides of the split are named so the denominator is never in doubt.
  • Stacked composition Four mitigation techniques to 100%. The bar is almost redundant next to the printed figures, which is the point.
  • Ranked list A top ten with no magnitudes at all. The rank is the whole finding.
  • Delta indicator Eight shares with their change under them, all of them fractions of a point, which tells you how still this data is.

Kraken Pro

The full order book and depth ladder are public with no account, which makes it the only display here updating several times a second that anyone can go and watch.

Kraken Pro — Trade / BTC-USD
Time series. Candles rather than a line, so each interval carries open, high, low and close instead of one sampled value. Order book and depth. Two ladders sharing a price axis, with the spread labelled between them and a depth bar behind every row. Red/green direction coloring. Asks in red, and also above the spread. Position carries the side on its own, so greyscale survives. Ratio and rate. The spread as 0.1 and as 0.0001% together, which is the absolute and the normalised form on one line. Delta indicator. −197.0 USD and −0.26% together, over a named 24-hour base. All three of the decisions, made and stated. Order book and depth. The price increment the book is aggregated into. Change it and the level count changes under the eye.
Trade / BTC-USD September 11, 2026 Kraken Pro, signed out (public market data) dense · dark · desktop-web
The red-green-direction entry argues that the convention should never carry the information alone, and this ladder shows the redundancy arriving for free. Asks are red and bids are green, but asks are also above the spread and bids below it, so the side is encoded twice—once in a hue that a colourblind reader may not separate, and once in a position that everyone can. Convert this panel to greyscale and it still works. The spread row between them is the other good decision: it reads "0.1 (0.0001%)", the absolute and the ratio side by side, so the number means something whether you are trading one Bitcoin or a hundred. Two details worth noticing. The quantity column runs to eight decimal places, which is correct for the asset and unreadable at a glance, and the depth bars behind each row are doing most of the actual communicating. And the "0.10" control at the top of the panel is the price increment the book is aggregated into—change it and the number of levels changes underneath you.
  • Order book and depth Two ladders sharing a price axis, with the spread labelled between them and a depth bar behind every row.
  • Red/green direction coloring Asks in red, and also above the spread. Position carries the side on its own, so greyscale survives.
  • Ratio and rate The spread as 0.1 and as 0.0001% together, which is the absolute and the normalised form on one line.
  • Delta indicator −197.0 USD and −0.26% together, over a named 24-hour base. All three of the decisions, made and stated.
  • Time series Candles rather than a line, so each interval carries open, high, low and close instead of one sampled value.
  • Order book and depth The price increment the book is aggregated into. Change it and the level count changes under the eye.

Grafana

The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it.

Grafana — Examples / Table
Data table. In-cell bar gauge clipped to a sliver, and text truncated mid-word with no escape to the full value. Data table. Threshold colour filling the cell, which makes a column scannable without being read. Sequential and diverging scales. A continuous ramp down a sorted column: the table doing a heatmap's job. Semantic status color. Value mappings turning raw levels into a closed set, each with its word in the cell. Delta indicator. Pills reading up, down and down fast: direction with no magnitude and no base. Also page 1 of 72.
Examples / Table September 10, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
Seven tables demonstrating what a cell can hold, and the range is the point: a threshold colour on the whole cell, a continuous gradient down a column, an image, a bar rendered inside the cell, a pill, and a markdown block carrying three metrics at once. Two of them stop working at this size. The bar gauge column on the right is squeezed to a sliver about six pixels wide, so the encoding that was supposed to make magnitude visible carries nothing, and the catch-phrase column beside it truncates mid-word with no way to see the rest. The bottom-left table is the one to look at hardest. It is sorted, it has column headers you can click, and the pager under it reads page 1 of 72. Any sort applied there is a sort of the page unless the query re-runs, and nothing on screen tells you which of those is happening.
  • Data table Threshold colour filling the cell, which makes a column scannable without being read.
  • Sequential and diverging scales A continuous ramp down a sorted column: the table doing a heatmap's job.
  • Data table In-cell bar gauge clipped to a sliver, and text truncated mid-word with no escape to the full value.
  • Semantic status color Value mappings turning raw levels into a closed set, each with its word in the cell.
  • Delta indicator Pills reading up, down and down fast: direction with no magnitude and no base. Also page 1 of 72.

Machine-readable: this page as markdown