Charts & metrics
Bar Chart
Grouped and stacked bars with a filterable legend
detent-bar-chart
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 3
- Wave
- phase-3-data
- Group
- Charts & metrics
7.6 KB gzip for the class module
Variants
stacked
empty data (no data state)
Toggle a legend chip, or focus a chart and press ArrowRight.
Recorded states
hoverrecorded state; no setterpressedrecorded state; no setterclosedrecorded state; no setterreduced motionrecorded state; no setteractiverecorded state; no setter
Usage
Import
import '/components/bar-chart/define.js';
// or register it yourself
import { DetentBarChart } from '/components/bar-chart/bar-chart.js';Attributes
animatedaria-labelcolorheightlabelonshow-legendvariant
Properties
dataformatTickformatValueonClickseries
Slots
No slots are recorded for this component.
Events
detent-click— {}
Example
Runnable example: site/examples/bar-chart.ts. The snippet below is generated from the catalogued attributes.
<detent-bar-chart
animated
aria-label="auto-generated"
color
height="260"
label
on
show-legend
variant="grouped"
></detent-bar-chart>Property-only values
const element = document.querySelector('detent-bar-chart');
if (element !== null) {
// data: BarDatum[]
element.data = [];
// series: BarSeries[]
element.series = [];
// formatValue: (n: number) => string
element.formatValue = () => {};
// formatTick: (n: number) => string
element.formatTick = () => {};
}Source
The pinned upstream source for this row:
src/components/ui/BarChart.tsxsha256 38e4519aeb3a…
Native files
The native module and its artifacts:
src/components/bar-chart/bar-chart.tssrc/components/bar-chart/styles.csssrc/components/bar-chart/define.tsdocs/components/bar-chart.mdsite/examples/bar-chart.tstests/browser/bar-chart.spec.tsevidence/components/bar-chart.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
animated | animated | boolean | true | Presence semantics: present means true, absent means false. |
aria-label | ariaLabel | string | auto-generated | Kebab-case attribute; camelCase property. |
color | — | — | — | Recorded in the catalog as an attribute. |
height | height | number | 260 | Kebab-case attribute; camelCase property. |
label | — | — | — | Recorded in the catalog as an attribute. |
on | — | — | — | Recorded in the catalog as an attribute. |
show-legend | showLegend | boolean | true | Presence semantics: present means true, absent means false. |
variant | variant | "grouped" | "stacked" | "grouped" | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
data | BarDatum[] | — | Property-only: assign from script; not accepted as an attribute. |
formatTick | (n: number) => string | compact Intl.NumberFormat | Property-only: assign from script; not accepted as an attribute. |
formatValue | (n: number) => string | Intl.NumberFormat | Property-only: assign from script; not accepted as an attribute. |
onClick | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
series | BarSeries[] | — | Property-only: assign from script; not accepted as an attribute. |
Events
| Event | Upstream prop | Payload type | Notes |
|---|---|---|---|
detent-click | onClick | () => void | Composed, bubbles; fires only for a user action. |
Slots
No slots are recorded for this component.
CSS customisation
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
- Framer Motion springs and AnimatePresence are replaced by WAAPI entrance motion over opacity/transform; both are removed under reduced motion.
- ChartTooltip is not a separate element: the tooltip is aria-hidden and the values are mirrored in the table and live region instead.
- Light-scheme series colours are darkened from upstream CHART_COLORS so each data mark keeps ≥ 3:1 against the chart surface (PC-12.6 accessibility correction).
- formatValue/formatTick are property-only function hooks; there is no string form and no attribute fallback.
- The legend is hidden when fewer than two series are defined, because a single-series legend cannot filter anything.
What it does
A grouped or stacked SVG bar chart with a series legend that filters (while keeping at least one series visible), a keyboard-driven active category, a screen-reader table mirror and entrance motion that is removed for prefers-reduced-motion: reduce. Every bar is a hand-written SVG path — no charting library is loaded.
Upstream behaviour
- Grouped and stacked layouts with interruptible, morphing bar transitions
- Zero charting library dependencies — every bar is generated with hand-written SVG paths
- Interactive legend that toggles series on and off while keeping at least one visible
- Floating tooltip tracks the hovered category and shows per-series values and totals
- Container-aware sizing with a ResizeObserver so the chart fits cards on mobile
- Screen-reader table and keyboard navigation with arrow keys, Home, End, and Escape
- Honors prefers-reduced-motion by disabling entrance and layout animations
Differences from upstream
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
- Framer Motion springs and AnimatePresence are replaced by WAAPI entrance motion over opacity/transform; both are removed under reduced motion.
- ChartTooltip is not a separate element: the tooltip is aria-hidden and the values are mirrored in the table and live region instead.
- Light-scheme series colours are darkened from upstream CHART_COLORS so each data mark keeps ≥ 3:1 against the chart surface (PC-12.6 accessibility correction).
- formatValue/formatTick are property-only function hooks; there is no string form and no attribute fallback.
- The legend is hidden when fewer than two series are defined, because a single-series legend cannot filter anything.