Stacked composition

A total is made of parts, and the viewer needs both the total and the mix over time.

Updated September 10, 2026

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.

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.

Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

Only the bottom band has a straight baseline, so only the bottom band is comparable across columns. Every band above it is being read off a moving floor, which is why a stack answers share and not trend.

shadcn: npx shadcn@latest add toggle-group
npm: recharts
Tokens: --card--muted--muted-foreground--border--chart-1--chart-2

LightDarkCode

egress
storage
compute

StackedArea.tsxSeries order is the stacking order, bottom first. Mode is normal or 100%, and 100% prints the total it would otherwise hide.

import { Area, AreaChart, Tooltip, XAxis } from "recharts";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/**
 * Stacking is not symmetric. The bottom band sits on a flat baseline and is
 * exactly readable; the outline is the total and is exact too; every band
 * between them is read off a moving floor and is approximate. So the order
 * of `series` is a decision: the first one is the bottom, and it should be
 * the series that most needs scrutiny, never whatever the query returned.
 *
 * `mode` is a closed pair because the two answer different questions. Normal
 * answers "how much and of what". 100% answers "what share" and discards the
 * total, so in that mode the total is printed beneath the chart instead.
 */
export type Mode = "normal" | "percent";

export type Series = {
  key: string;
  label: string;
  values: number[];
  /** Assigned by key by the caller, so the same series is the same colour on every panel. */
  color: string;
};

const TICK = { fontSize: 10, fill: "hsl(var(--muted-foreground))" };

export function StackedArea({ labels, series, mode, unit, onModeChange, width = 400, height = 190 }: {
  labels: string[];
  /** Bottom first. */
  series: Series[];
  mode: Mode;
  unit: string;
  onModeChange?: (mode: Mode) => void;
  width?: number;
  height?: number;
}) {
  const data = labels.map((label, i) => Object.fromEntries([["label", label], ...series.map((s) => [s.key, s.values[i]])]));
  const totals = labels.map((_, i) => series.reduce((n, s) => n + s.values[i], 0));
  const first = totals[0], last = totals[totals.length - 1];
  const change = Math.round(((last - first) / first) * 100);

  return (
    <div>
      <div className="overflow-x-auto">
        <AreaChart width={width} height={height} data={data} stackOffset={mode === "percent" ? "expand" : "none"} margin={{ top: 8, right: 8, bottom: 0, left: 8 }}>
          <XAxis interval={0} dataKey="label" tick={TICK} stroke="hsl(var(--border))" tickLine={false} />
          <Tooltip formatter={(v, name) => [`${v} ${unit}`, series.find((s) => s.key === name)?.label ?? name]} />
          {series.map((s, i) => (
            <Area
              key={s.key}
              type="linear"
              dataKey={s.key}
              stackId="stack"
              fill={s.color}
              fillOpacity={0.6}
              // The outline is the total, and it is the other exact edge.
              stroke={mode === "normal" && i === series.length - 1 ? s.color : "none"}
              strokeWidth={2}
              isAnimationActive={false}
            />
          ))}
        </AreaChart>
      </div>

      <div className="mt-2 flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground">
        <ul className="flex gap-3">
          {series.map((s) => (
            <li key={s.key} className="flex items-center gap-1.5">
              <span className="size-2 rounded-[2px]" style={{ background: s.color }} aria-hidden="true" />
              {s.label}
            </li>
          ))}
        </ul>
        {/* 100% hides the total so completely that a halving looks like nothing happened. Print it. */}
        {mode === "percent" && (
          <p className="tabular-nums">
            total {first} → {last} {unit}, {change === 0 ? "unchanged" : `${change > 0 ? "up" : "down"} ${Math.abs(change)}%`}
          </p>
        )}
        {onModeChange && (
          <ToggleGroup type="single" value={mode} onValueChange={(m) => m && onModeChange(m as Mode)} className="ml-auto gap-1" aria-label="stacking">
            <ToggleGroupItem value="normal" size="sm" className="h-6 rounded-full border px-2 text-[10px] data-[state=on]:bg-muted">Normal</ToggleGroupItem>
            <ToggleGroupItem value="percent" size="sm" className="h-6 rounded-full border px-2 text-[10px] data-[state=on]:bg-muted">100%</ToggleGroupItem>
          </ToggleGroup>
        )}
      </div>
    </div>
  );
}

demo.tsxHow it is called: three spend lines with the growing one at the bottom, and a toggle between normal and 100%.

import { useState } from "react";
import { StackedArea, type Mode } from "./StackedArea";

/**
 * Cloud spend by line over seven months. Egress is the smallest series and
 * the one growing, so it goes at the bottom where its shape can be read.
 * Switching to 100% keeps the total in a line beneath the chart.
 */
export default function Demo() {
  const [mode, setMode] = useState<Mode>("normal");
  return (
    <div className="w-fit rounded-lg border bg-card p-4">
      <StackedArea
        labels={["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
        series={[
          { key: "egress", label: "egress", values: [4, 8, 12, 10, 16, 14, 18], color: "hsl(var(--muted-foreground))" },
          { key: "storage", label: "storage", values: [56, 44, 56, 32, 50, 32, 40], color: "hsl(var(--chart-2))" },
          { key: "compute", label: "compute", values: [54, 48, 56, 44, 54, 46, 50], color: "hsl(var(--chart-1))" },
        ]}
        mode={mode}
        unit="k$"
        onModeChange={setMode}
      />
    </div>
  );
}