Stacked Column Chart

A column chart that splits every column into layers so you can read its composition. The legend at the top has one toggle per layer (color dot, name, total across all columns). Clicking one collapses that layer to zero height and fades it out while the layers above sink into place on a spring; the Y axis re-rounds to the largest visible stack, grid lines glide to their new positions and tick numbers tween to their new values. Hovering a column dims the others to half opacity and shows a tooltip listing each layer's value and share, top to bottom in stack order. It is hand-drawn SVG with no charting library, and its width follows the container.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<StackedColumnChart/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/stacked-column-chart.en.json

Usage

import { StackedColumnChart } from "@/components/ui/stacked-column-chart";

const series = [
  { key: "web", label: "官網" },
  { key: "store", label: "門市" },
  { key: "group", label: "團購" },
];

const data = [
  { label: "3 月", values: { web: 42, store: 31, group: 12 } },
  { label: "4 月", values: { web: 46, store: 29, group: 16 } },
  { label: "5 月", values: { web: 51, store: 33, group: 22 } },
];

<StackedColumnChart
  series={series}
  data={data}
  formatValue={(v) => `${v} 萬`}
  onHiddenKeysChange={(keys) => console.log("隱藏：", keys)}
/>

Props

StackedColumnSeries

StackedColumnDatum

niceStackedScale(max) is also exported by name. It returns the same Y-axis max and ticks the chart uses, which helps when lining up other charts.

How it works

• Colors come from CSS variables: --wb-stacked-column-chart-1 through -5 default to five teal steps from dark to light (#134e4a #0f766e #14b8a6 #5eead4 #ccfbf1), with a brighter set swapped in automatically in dark mode. Set those five variables on any ancestor to replace the whole palette; more than five layers cycle through it. The focus ring reads --wb-stacked-column-chart-accent (default #0d9488, #2dd4bf in dark mode).
• Timing can be overridden too: --wb-stacked-column-chart-stiffness (default 260, damping fixed at 30) drives the spring for collapsing layers and moving grid lines, and --wb-stacked-column-chart-duration (default 600ms) drives the entrance growth. Columns are staggered by 40ms and tick numbers tween over 400ms.
• A collapsed layer is not removed from the DOM. It shrinks to zero height and rests at the top of the stack below it, so when shown again it grows from that exact spot and the stack order never changes.
• At least one layer always stays visible: when only one is left its legend button gets aria-disabled and clicking does nothing; if controlled mode passes "all hidden", the first layer still shows.
• The entrance only plays once, when the chart scrolls into view (useInView with a -10% margin). The tooltip has a fixed width and is clamped inside the container so it never overflows the card.

Accessibility

• Legend items are native button elements with aria-pressed reflecting whether the layer is visible; Enter / Space toggles them
• The plot is focusable (tabIndex=0): ← / → move between columns, Home / End jump to the ends and Esc dismisses the tooltip; the current column's breakdown is announced through an aria-live region
• The SVG has role="img" with an aria-label summary (column count, visible layers, highest total), plus a screen-reader-only data table with every layer's value and the visible total per column
• Every focusable element shows a focus-visible ring
• When the user has reduce motion enabled, column growth, layer collapsing and tick tweens jump straight to their final state, and the tooltip keeps working