# KPI tile > A person needs to know the current value of one number, and whether it's fine, before they look at anything else. - Canonical: https://patterns.konigi.com/dashboards/kpi-tile - Group: Data information - Level: implementation - Status: published - Updated: September 9, 2026 - Also called: stat card, big number, BAN, metric card, scorecard tile, stat panel --- ## Problem Someone opens the dashboard with one question: is the thing I'm responsible for okay right now? They need the answer in the first second, and they need it before the charts, tables, and filters have a chance to compete for attention. ## Solution A tile that shows one number large, one label small, and one piece of context. The context is what separates a KPI tile from a decoration. It's usually a delta against a prior period, a color that encodes state, or a sparkline of the recent trend. Stephanie Evergreen's line applies: a big number with no context is a number the reader has to interpret alone, which means most readers won't. The tile earns its size by being scannable as a group. Six tiles in a row read as a status strip. Six tiles with six different layouts read as six problems. ## Use when The number is a leading indicator of something the viewer acts on. Error rate, p95 latency, open incidents, cash balance, orders today. The viewer looks at it many times a day. ## Don't use when The number only matters in relation to a series. Monthly revenue with no comparison is a chart, not a tile. And don't lead a page with tiles when the page's job is analysis rather than monitoring; on an exploratory dashboard the big numbers are the least interesting thing on the screen. ## Trade-offs Tiles take space in the most valuable region of the page and say one thing each. Every tile you add lowers the weight of every other tile. Color-coded state is fast but fails when the thresholds behind the color are wrong or stale, and users trust the color more than the number. Percentages and rates in tiles hide the denominator; 99.9% of what? ## Checklist - Does the label say what the number is in the viewer's words, not the metric name in the database? - Is there a unit, and is it the unit the viewer uses? - What time window does this number cover, and can the viewer tell? - What is the number compared against, and is that comparison honest (same window, same denominator)? - If the tile is colored, where are the thresholds defined, and who can change them? - What does the tile show when the data source is down, empty, or stale? - Can the viewer click it, and if so, where do they land? - Do all tiles in the row share the same anatomy: label position, number size, delta placement? - Are the digits tabular so the row doesn't jitter as values change? - Is the number still readable from across the room if this ever goes on a wall? ## Compare **Grafana's stat panel** is the most configurable version in the wild: value, sparkline background, threshold coloring, and unit formatting are all first-class, which means it's also the easiest to misuse. **Sentry** puts a sparkline and an event count inline on every issue row rather than in a tile, which is the same pattern at list density. **Stripe's** home tiles pair today's value with a ghost line of the prior period, so the comparison is a shape, not a percentage. **Plausible** uses a strip of five tiles as the entire top of the page and switches the main chart when you click one, which turns the tile into a navigation control. ## Related Delta indicator is the context most tiles carry. Sparkline is the other. Header KPI strip is the layout tiles usually live in. Semantic status color is what makes a tile readable at a glance and dangerous when the thresholds are wrong. Freshness indicator answers the question a tile can't: as of when? ## Examples ### GitHub (GitHub, Inc.) The contribution graph is the calendar heatmap every other product copied, and its five-step bucketing is the deliberate trade that made it legible. **Profile / contribution graph** — captured September 11, 2026, github.com, signed out (public profile). public, medium density, light theme, desktop-web. The calendar heatmap everyone else copied, and a good demonstration of what it trades away. 3,703 contributions across 365 days is about ten a day, and the scale has five steps, so almost every cell here lands in the middle two and the year reads as one flat field of mid-green. A day with five commits and a day with twenty-five are the same colour. That is the deliberate choice—coarse buckets make the rhythm readable and make any individual day approximate—but on a profile this active there is no rhythm left to read either, because the bucketing has flattened the variation it was meant to reveal. The layout still earns its place: weeks as columns and weekdays as rows means a weekend effect would show as two pale rows across the full width, and here it doesn't, which tells you something true about this person's week. The panel beside it is worse off. It is a four-axis diagram of code review, issues, pull requests and commits, and with 100% commits it collapses to a single straight line. Hotspots in this capture: - [Calendar heatmap](https://patterns.konigi.com/dashboards/calendar-heatmap) — Fifty-three columns of weeks, seven rows of weekdays, and only Mon, Wed and Fri labelled to save the space. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) *(this pattern)* — The total sits above the grid, so the cells have a denominator. Most calendar heatmaps omit this. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — Five discrete steps rather than a continuous ramp, which is why ten commits and thirty share a colour. - [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker) — Sixteen years as a list. No arbitrary range, no relative window—the only unit on offer is a calendar year. ### 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 / Polystat Visualization Showcase** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web. The plugin's own description is the host map pattern stated plainly —"visualise hundreds of metric series as a grid of coloured polygons" and "spot anomalies across your entire fleet at a glance"—and the shapes gallery halfway down says all six shapes "apply the same threshold colouring; choose the one that fits your layout." The page then disproves its own claim. The hexagon panels tile with every neighbour sharing an edge, so three cells read as one block. The circle panels leave a gap between every pair, so three cells read as three things you have to compare one at a time. At six cells that difference is a preference. At three hundred it is the difference between a cluster you see and a cluster you assemble, which is why the shape is a structural choice rather than a styling one. Hotspots in this capture: - [Host map](https://patterns.konigi.com/dashboards/host-map) — Hexagons sharing edges. Adjacent unhealthy cells merge into one shape, which is the point of the tiling. - [Host map](https://patterns.konigi.com/dashboards/host-map) — The same data as circles: a gap around every cell, so nothing clusters. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — A closed set of three—OK, warning, critical—applied as the whole cell fill. - [Ranked list](https://patterns.konigi.com/dashboards/ranked-list) — Sorted descending so the worst cell lands where the eye starts. No share of total, and no row for the rest. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) *(this pattern)* — Name-only mode: two cells carrying a label, a colour and no number at all. **Examples / Stats** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, desktop-web. A showcase rather than a working dashboard, which is what makes it useful: it is Grafana demonstrating every visual option the stat panel has, in one place, with nothing else competing. Two things are worth reading it for. The first is that across roughly sixty tiles here, not one carries a comparison. Every option on display is about how the number looks—background colour, value colour, orientation, text mode, grid packing—and none is about what the number should be measured against. The panel type that most needs a delta and a base is being shown off without either. The second is the colour. Every single tile on this page is coloured, and the "No text" panel is ninety-odd green rectangles carrying no label and no value at all, which is colour as the sole carrier of meaning at its purest. Both of those are reasonable for a catalogue of options and neither survives being copied onto a real page. Hotspots in this capture: - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) *(this pattern)* — Label, value, unit and a sparkline behind it. No delta, no base, no window. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — The dark half of the pair. The same six values in the light capture arrive as pale pink on white. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A column of them, each scaled to its own series, which is the comparison Tufte warns the arrangement invites. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — Whole-tile background colour: the loudest channel available, spent on all six. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Seven rows, seven different colours, no resting state. Nothing here can read as abnormal. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) *(this pattern)* — Thirty numbers with no labels—the value with nothing attached to it. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — No text at all. Colour is the only carrier, which is the WCAG failure stated as a feature. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Six tiles sharing one anatomy, which is the arrangement that reads as a row rather than as six things. ## Related patterns - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) — A number means nothing until the viewer knows which way it moved and by how much. - [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. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — The first row of the page has to answer 'is it okay' before the rest asks 'why'. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) — State has to be readable before the number is. - [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — The viewer is about to act on a number and doesn't know how old it is. ## Sources - [Bach et al., Dashboard Design Patterns—Single value](https://dashboarddesignpatterns.github.io/patterns.html) - [Stephanie Evergreen, The Fourth Purpose of a Dashboard](https://stephanieevergreen.com/the-fourth-purpose-of-a-dashboard/) - [Microsoft, Tips for designing a great Power BI dashboard](https://learn.microsoft.com/en-us/power-bi/create-reports/service-dashboards-design-tips) - [Grafana, Stat panel](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/stat/) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.