# Stacked composition > A total is made of parts, and the viewer needs both the total and the mix over time. - Canonical: https://patterns.konigi.com/dashboards/stacked-composition - Group: Visual representation - Level: implementation - Status: published - Updated: September 10, 2026 - Also called: stacked area, stacked bar, part-to-whole --- ## Problem Total spend is climbing. The viewer needs to know both that it is climbing and which of the eight services is responsible, and two separate panels make them do the correlation by eye. ## Solution Stack the series. The outline is the total, the bands are the parts, and one chart answers both questions. The important thing to understand is that stacking is not symmetric in what it communicates. The bottom series sits on a flat baseline and its shape is perfectly readable. Every series above it sits on a wobbling baseline made of everything below, and human perception is poor at judging the thickness of a band whose bottom edge is moving. So the bottom band and the total outline are accurate; everything in between is approximate. That asymmetry has a direct consequence: the series you most want to scrutinise belongs at the bottom, and the ordering is a design decision rather than whatever the query returned. Grafana exposes stacking with three settings that are worth naming because the third changes the question entirely. **Off** puts series side by side. **Normal** stacks to show cumulative values. **100%** stacks to fill the height, showing each series' relative proportion. Normal answers "how much and of what". 100% answers "what share", and deliberately discards the total—which is right when composition is the question and actively misleading when someone reads a stable 100% chart as a stable business. ## Use when The parts genuinely sum to a meaningful whole, the total matters as much as the split, and there are few enough categories that bands stay thick enough to see. ## Don't use when The viewer needs to compare middle series against each other, or the categories don't actually sum—stacking overlapping or double-counted quantities produces a total that means nothing. Above roughly six or seven categories, bands become slivers and the chart is a colour test. ## Trade-offs Only the bottom series and the total are read accurately, which means most of the chart is approximate by construction. Stacked areas over time are especially prone to misreading, because a band that looks like it is growing may just be riding a rising baseline. Category order is rarely stable when it comes from a query, so the same chart reorders between refreshes and the colours move. And 100% stacking hides the total so completely that a chart can look reassuringly unchanged while the underlying volume halves. ## Checklist - Do these parts genuinely sum to the whole, with no overlap or double counting? - Which series is at the bottom, and is it the one that most needs accurate reading? - Is category order stable between refreshes and between viewers? - How many categories, and is the thinnest band still visible? - Is there an "other" bucket, and does it carry a count? - Normal or 100%, and does the choice match the question being asked? - If 100%, is the total available anywhere on the page? - Do colours stay assigned to the same category across every panel? - Could a viewer mistake a rising baseline for a growing band? - Would small multiples let them compare the middle series properly? ## Compare **Grafana** offers stacking as Off, Normal and 100% across its time series, bar chart and histogram panels, which keeps the vocabulary consistent and makes the 100% mode easy to reach without its caveat attached. **Datadog** defaults many of its resource breakdowns to stacked areas, which suits infrastructure spend where the parts genuinely conserve and totals matter. **Netdata** stacks per-dimension charts heavily by default, which works because the dimensions are usually a true decomposition of a bounded resource. **Amplitude** leans on 100% stacking for composition over time, which is the honest use of that mode and still routinely gets screenshotted without the total anywhere in frame. **Cloudflare Radar** defuses the 100% caveat by printing every segment's figure above the bar, so the chart can lose the total without the reader losing it. The bar ends up nearly redundant, which is a fair trade when the numbers were the point and the picture was only ever the index to them. ## Related Time series is what a stacked area is built on, and the entry that covers the axis questions. Ranked list answers "which parts dominate" without the reading problems. Ratio and rate is what 100% stacking is really computing. Categorical series palette determines whether the bands can be told apart. Small multiples is the alternative when comparing the parts matters more than seeing the total. ## 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** — 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) *(this pattern)* — 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) — Eight shares with their change under them, all of them fractions of a point, which tells you how still this data is. ### 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 / Logs Panel** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web. The arrangement is the standard one and it is right: a stacked volume chart by log level across the top, then the raw stream underneath, so the shape of the traffic and the individual lines share one page. Two details are worth stopping on. Every line carries two timestamps in two timezones—the gutter reads 2026-09-10 18:36:58.435 in the browser's local time, and the JSON three characters later reads 2026-09-11T01:36:58.434956621Z in UTC. Same instant, seven hours apart, on the same row, and nothing labels either one. The second is the trace ID in the expanded panel at the bottom, which is the thing that makes a log line usable: it is the route from a line of text to the request it came from. Two of the three entries shown carry the identical trace ID, which is also the case deduplication exists for. Hotspots in this capture: - [Stacked composition](https://patterns.konigi.com/dashboards/stacked-composition) *(this pattern)* — Volume by level over time. The bottom band sits on a flat baseline; the two above it are approximate. - [Log tail](https://patterns.konigi.com/dashboards/log-tail) — Raw lines, truncated at the right edge, with two timestamps in two timezones on every row. - [Drill-down](https://patterns.konigi.com/dashboards/drill-down) — The trace ID: the route out of the wall of text and into the request that produced it. ### Kibana (Elastic) Query-first rather than panel-first: the search bar is the primary control and the charts are downstream of it, which inverts Grafana's arrangement. **Dashboards / [Flights] Global Flight Dashboard** — captured September 10, 2026, Elastic demo environment, sample flight data (guest session). analytical, dense density, light theme, desktop-web. Two things on this page are worth arguing with. The first is the table on the right, sorted by delay rate: Chicago/Rockford 100%, Syracuse 100%, Birmingham 75%. A hundred percent of flights delayed is either a catastrophe or one flight, and nothing in the table says which, because the denominator isn't a column. The cells are on a red ramp, so the two rows that are almost certainly a sample of one are the loudest thing in the panel. The second is the tile row: Delayed 25.2%, then beside it "Delayed vs 1 week earlier—76.9%". Seventy-six point nine percent of what? It could be last week's rate, it could be this week as a proportion of last week, it could be the change. Three different numbers, one label, and the tile picks whichever the query returned. What the page gets right is the filtering: a KQL bar for people who know the syntax and three declared controls underneath for people who don't, both visible at once. Hotspots in this capture: - [Ratio and rate](https://patterns.konigi.com/dashboards/ratio-and-rate) — Delay rates up to 100% with no denominator anywhere. One flight and a thousand flights render identically. - [Compare periods](https://patterns.konigi.com/dashboards/compare-periods) — "vs 1 week earlier, 76.9%"—the comparison base is named and the expression isn't. - [Share and embed](https://patterns.konigi.com/dashboards/share-and-embed) — Share, export and full-screen in the header. Whether the range and filters travel with them is the whole question. - [Filter bar](https://patterns.konigi.com/dashboards/filter-bar) — Declared controls under the query bar: two pickers and a price range. Both mechanisms on screen at once. - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) — Twelve columns, and the biggest panel is a table rather than the headline chart. Size isn't carrying priority here. - [Stacked composition](https://patterns.konigi.com/dashboards/stacked-composition) *(this pattern)* — Stacked to 100%, so the total is discarded on purpose and only the mix of delay types remains. - [Annotation](https://patterns.konigi.com/dashboards/annotation) — Event markers along the top of the series, numbered and grouped, on the data's own axis. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Five tiles in three different sizes and two different layouts, so the row reads as five things. ## Related patterns - [Time series](https://patterns.konigi.com/dashboards/time-series) — The viewer needs to see how a value changed over time and spot the moment it changed. - [Ranked list](https://patterns.konigi.com/dashboards/ranked-list) — The viewer needs to know which few items dominate, not the distribution of all of them. - [Ratio and rate](https://patterns.konigi.com/dashboards/ratio-and-rate) — A raw count misleads; the viewer needs it normalized by a denominator they understand. - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette) — Twelve services on one chart need twelve colors a person can tell apart. - [Small multiples](https://patterns.konigi.com/dashboards/small-multiples) — Many series would tangle on one chart; the viewer needs them on identical axes side by side. ## Sources - [Grafana, Bar chart panel](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/visualizations/bar-chart/) - [Grafana, Histogram panel](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/visualizations/histogram/) - [Bach et al., Dashboard Design Patterns](https://dashboarddesignpatterns.github.io/patterns.html) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.