#193
Vertical bars
A vertical bar chart of one Revenue series across four quarters.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Vertical bars" pattern (@codeatlasdev/ui demo #193, charts/bar) in my app.
Call get_demo({ ids: ["#193"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Comparing a single metric across a few time periods, such as quarterly revenue.
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: 'Revenue', data: [38400, 54200, 71600, 89800] }`
- `categories={['Q1', 'Q2', 'Q3', 'Q4']}`
- `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}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: 'Revenue', data: [38400, 54200, 71600, 89800] }`
- `categories={['Q1', 'Q2', 'Q3', 'Q4']}`
- `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k`
- `height="300px"`
Related
Loading source.