#202
Multi-line comparison
A line chart with three series, Revenue, Expenses and Profit, across nine months.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Multi-line comparison" pattern (@codeatlasdev/ui demo #202, charts/line) in my app.
Call get_demo({ ids: ["#202"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Comparing related metrics over time, such as income against cost and the resulting margin.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- LineChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<LineChart` with 3 series: `{ name: 'Revenue', data: revenue }`, `{ name: 'Expenses', data: expenses }`, `{ name: 'Profit', data: profit }`
- `const profit = revenue.map((r, i) => r - expenses[i])` derives the third series
- `categories={months}` with `'Jan'` to `'Sep'`
- `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k`
- `height="300px"` inside `<Card full>`
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 - LineChart
@codeatlasdev/ui/charts
How it is built
- `<LineChart` with 3 series: `{ name: 'Revenue', data: revenue }`, `{ name: 'Expenses', data: expenses }`, `{ name: 'Profit', data: profit }`
- `const profit = revenue.map((r, i) => r - expenses[i])` derives the third series
- `categories={months}` with `'Jan'` to `'Sep'`
- `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k`
- `height="300px"` inside `<Card full>`
Related
Loading source.