Responsive SVG stacked bars for compact breakdowns.
StackedBarChart compares category contribution across periods without adding a charting dependency. Its default series palette follows the blue and aqua chart language, with rounded segments, small gaps, axes, and a value tooltip.
Stack two to five series for usage, billing, or release status splits.
<StackedBarChart
ariaLabel="Usage by channel"
data={[
{ month: "Jan", web: 18, api: 8, jobs: 4 },
{ month: "Feb", web: 22, api: 12, jobs: 7 },
{ month: "Mar", web: 16, api: 10, jobs: 9 },
]}
series={[
{ key: "web", label: "Web" },
{ key: "api", label: "API" },
{ key: "jobs", label: "Jobs" },
]}
showLegend
xKey="month"
/>import { StackedBarChart } from "@froggdesign/enter-ui-react";Use semantic tones only when the series itself is semantic.
Pass ariaLabel or aria-label to name the chart group. Each category is a
focusable button announcing its series values. Tab enters the categories;
Left and Right Arrow move between adjacent categories. Enter or Space shows
the value tooltip, and Escape dismisses it. Exact values can also appear in a
nearby table when users need to read or copy the complete dataset.
The axis starts at zero and rounds the highest stacked total up to a nearby readable bound: a total of 47 produces a maximum of 50. This same scale is used for segments and labels. Series values are nonnegative contributions; use LineChart or AreaChart when values can be negative.
data: records for each bar.xKey: period or category field.series: { key, label, tone?, color? }[].height: SVG height.ariaLabel: accessible chart label.showLegend: renders a readable legend above the plot (default false); enable it for multi-series comparisons.showAxis, showGrid: control the numeric/category axes and dashed grid.labelKey remains supported.StackedBarChart uses the shared blue/aqua chart palette unless a series explicitly supplies a semantic tone or color. The visible tooltip appears on pointer hover and keyboard focus.
Tooltips show exact series values and each series’ share of the stack. The tooltip does not imply a change over time.
Repeated labels, such as the same hour on consecutive days, retain one axis entry per sample without React key warnings. Label text is presentation, not sample identity. The chart keeps its existing keyboard controls and tooltips.
Dense category axes show at most six labels while retaining every sample and keyboard tooltip. Below 600px, intermediate labels are reduced further and the first and final labels stay visible.