# Delta indicator > A number means nothing until the viewer knows which way it moved and by how much. - Canonical: https://patterns.konigi.com/dashboards/delta-indicator - Group: Data information - Level: implementation - Status: published - Updated: September 9, 2026 - Also called: change badge, trend arrow, vs-previous --- ## 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. ## Related 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. ## Examples ### Cloudflare Radar (Cloudflare) 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. **Worldwide Overview, dark** — captured September 11, 2026, Public site, signed out; no version string exposed. public, medium density, dark theme, 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. Hotspots in this capture: - [Dark-first data palette](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/categorical-series-palette) — Four categories, four fixed hues, held across both grounds. Which one dominates the eye is not held. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) *(this pattern)* — The one colour that reads the same on both grounds, because it is carrying meaning rather than identity. **Worldwide Overview** — captured September 11, 2026, Public site, signed out; no version string exposed. public, medium density, light theme, 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. Hotspots in this capture: - [Multi-page dashboard](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/compare-periods) — The dotted series is the previous seven days, drawn on the same axis rather than beside it. - [Overview then detail](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/ratio-and-rate) — Shares only, never counts, and both sides of the split are named so the denominator is never in doubt. - [Stacked composition](https://patterns.konigi.com/dashboards/stacked-composition) — Four mitigation techniques to 100%. The bar is almost redundant next to the printed figures, which is the point. - [Ranked list](https://patterns.konigi.com/dashboards/ranked-list) — A top ten with no magnitudes at all. The rank is the whole finding. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) *(this pattern)* — Eight shares with their change under them, all of them fractions of a point, which tells you how still this data is. ### Kraken Pro (Kraken) 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. **Trade / BTC-USD** — captured September 11, 2026, Kraken Pro, signed out (public market data). operational, dense density, dark theme, 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. Hotspots in this capture: - [Order book and depth](https://patterns.konigi.com/dashboards/order-book) — Two ladders sharing a price axis, with the spread labelled between them and a depth bar behind every row. - [Red/green direction coloring](https://patterns.konigi.com/dashboards/red-green-direction) — Asks in red, and also above the spread. Position carries the side on its own, so greyscale survives. - [Ratio and rate](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/delta-indicator) *(this pattern)* — −197.0 USD and −0.26% together, over a named 24-hour base. All three of the decisions, made and stated. - [Time series](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/order-book) — The price increment the book is aggregated into. Change it and the level count changes under the eye. ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Examples / Table** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, 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. Hotspots in this capture: - [Data table](https://patterns.konigi.com/dashboards/data-table) — Threshold colour filling the cell, which makes a column scannable without being read. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — A continuous ramp down a sorted column: the table doing a heatmap's job. - [Data table](https://patterns.konigi.com/dashboards/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](https://patterns.konigi.com/dashboards/semantic-status-color) — Value mappings turning raw levels into a closed set, each with its word in the cell. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) *(this pattern)* — Pills reading up, down and down fast: direction with no magnitude and no base. Also page 1 of 72. ## Related patterns - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — A person needs to know the current value of one number, and whether it's fine, before they look at anything else. - [Compare periods](https://patterns.konigi.com/dashboards/compare-periods) — Today's line means nothing without last week's line under it. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — The viewer needs the shape of the recent past next to the number, without the cost of a full chart. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — State has to be readable before the number is. - [Red/green direction coloring](https://patterns.konigi.com/dashboards/red-green-direction) — Finance readers expect up-green and down-red, and a fifth of them can't tell the two apart. ## Sources - [Bach et al., Dashboard Design Patterns](https://dashboarddesignpatterns.github.io/patterns.html) - [Grafana, Stat panel](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/visualizations/stat/) - [Grafana, View percent change in stat visualizations](https://grafana.com/whats-new/2024-01-05-view-percent-change-in-stat-visualizations/) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.