Responsive SVG stacked bars for compact breakdowns.
StackedBarChart compares category contribution across periods without adding a charting dependency.
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", tone: "default" },
{ key: "api", label: "API", tone: "info" },
{ key: "jobs", label: "Jobs", tone: "success" },
]}
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. Each segment includes a text summary through SVG titles, but exact values should also appear in nearby table or metric copy when precision matters.
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 compact in-SVG legend marker row.className: style hook for layout.labelKey remains supported.StackedBarChart uses .eui-stacked-bar-chart, .eui-stacked-bar-chart__segment, .eui-stacked-bar-chart__legend, and .eui-stacked-bar-chart__legend-item. Prefer series tone or token-derived color values instead of decorative custom palettes.