#203
Simple line
A basic line chart of a single Revenue series over nine months.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Simple line" pattern (@codeatlasdev/ui demo #203, charts/line) in my app.
Call get_demo({ ids: ["#203"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Showing the trend of one metric over time, the default time-series view.
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 one series `{ name: 'Revenue', data: revenue }`
- `revenue` has 9 values from `42000` to `112000`
- `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 one series `{ name: 'Revenue', data: revenue }`
- `revenue` has 9 values from `42000` to `112000`
- `categories={months}` with `'Jan'` to `'Sep'`
- `valueFormatter={fmt}` renders `$${(v / 1000).toFixed(0)}k`
- `height="300px"` inside `<Card full>`
Related
Loading source.