#190
Horizontal bars
A horizontal bar chart ranking eight products by a single Sales series, with values formatted as thousands.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Horizontal bars" pattern (@codeatlasdev/ui demo #190, charts/bar) in my app.
Call get_demo({ ids: ["#190"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Ranking items by one metric, such as top products or top accounts, when category labels are long.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- BarChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<BarChart` inside `<Card full>`
- One series `{ name: 'Sales', data: [9840, 8720, 7650, 6430, 5980, 4810, 3920, 3140] }`
- `categories={products}` with 8 product names
- `horizontal` prop
- `valueFormatter` renders `${(v / 1000).toFixed(1)}k`
- `height="300px"`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - BarChart
@codeatlasdev/ui/charts
How it is built
- `<BarChart` inside `<Card full>`
- One series `{ name: 'Sales', data: [9840, 8720, 7650, 6430, 5980, 4810, 3920, 3140] }`
- `categories={products}` with 8 product names
- `horizontal` prop
- `valueFormatter` renders `${(v / 1000).toFixed(1)}k`
- `height="300px"`
Related
Loading source.