Components · Bar Chart
Bar Chart
Bars that read their data — the axes are computed, not typed
No basis in this component: Density · Variant — and a control that changes nothing is not shown.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the code — once for the whole site.
Enter your email to reveal the prompt — once for the whole site.
Enter your email to reveal the code and the prompt
Once. No password, no account.Usage
- Copy
tokens.cssinto your project and link it before the component styles. - Paste the HTML markup where you want it.
- Paste the CSS into your sheet — its selectors are scoped to the component class, so nothing leaks.
- Paste the JS after the markup, or load it with
defer. - Set
dirtortlorltr— the component works with both.
States
FocusSelectedLoadingErrorEmpty
RTL/LTR
Works in both directions — Arabic and English. Enforced in every build by , and exercised in the playground above.
Responsive
No fixed width that overflows, and a layout that stretches.
Accessibility
- Every field is named, with no redundant ARIA —
- Fully operable by keyboard
- Carries an explicit semantic role
Motion
Short transitions on hover and focus. And it stops for anyone who prefers reduced motion.
Dependencies
tokens.css— Every colour and size in the component points to a token, with no literal valuescript.js— The component behaviour lives there — without it, it renders but does not work
Examples
- In English — The direction flips and the layout follows
- In light mode — Colours come from tokens, so they follow the theme
- On the mobile stage — A width of 360 pixels
- Without motion — As anyone who prefers reduced motion sees it
Verification matrix
| Capability | Status | Evidence |
|---|---|---|
| RTL | Verified | check-rtl |
| LTR | Verified | check-rtl |
| Dark | Verified | check-themes |
| Light | Verified | check-themes |
| Contrast | Verified | check-contrast |
| Accessibility | Verified | a11y.test · check-aria |
| Keyboard | Verified | check-keyboard |
| Tokens | Verified | check-raw-colors |
| Localization | Supported | Measured from the files |
| Motion | Supported | Measured from the files |
| Reduced motion | Supported | Measured from the files |
| Touch | Supported | Measured from the files |
| Loading states | Supported | Measured from the files |
Verified means a gate attests to it in every build. Supported means it was measured from the files, with no gate attesting — so it claims no more.
Not documented yet: When to use · When not to use — it needs human judgement, and no prose will be generated that looks like judgement without being it.