#192
Grouped and stacked
A bar chart with Grouped and Stacked buttons that switch the same two-year quarterly data between layouts.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Grouped and stacked" pattern (@codeatlasdev/ui demo #192, charts/bar) in my app.
Call get_demo({ ids: ["#192"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Letting users flip between comparing values side by side and seeing the combined total.
Keep these library parts, with the props and tokens the demo uses:
- Card, Flex, Button from "@codeatlasdev/ui"
- BarChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `let mode = $state<'grouped' | 'stacked'>('grouped')` drives the layout
- Two `<Button` elements with `size="sm"`, labelled Grouped and Stacked, using `variant={mode === 'grouped' ? 'filled' : 'glass'}` and `variant={mode === 'stacked' ? 'filled' : 'glass'}`
- `onclick={() => (mode = 'grouped')}` and `onclick={() => (mode = 'stacked')}` set the mode
- `<BarChart` with 2 series `'2025'` and `'2026'`, 4 values each
- `categories={['Q1', 'Q2', 'Q3', 'Q4']}`
- `stacked={mode === 'stacked'}` and `height="300px"`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `let mode = $state<'grouped' | 'stacked'>('grouped')` drives the layout
- Two `<Button` elements with `size="sm"`, labelled Grouped and Stacked, using `variant={mode === 'grouped' ? 'filled' : 'glass'}` and `variant={mode === 'stacked' ? 'filled' : 'glass'}`
- `onclick={() => (mode = 'grouped')}` and `onclick={() => (mode = 'stacked')}` set the mode
- `<BarChart` with 2 series `'2025'` and `'2026'`, 4 values each
- `categories={['Q1', 'Q2', 'Q3', 'Q4']}`
- `stacked={mode === 'stacked'}` and `height="300px"`
Related
Loading source.