Stacked composition

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

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%.Copy

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>
  );
}