#209
Rose chart
A Nightingale rose chart of six product areas, using the rose prop on PieChart.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Rose chart" pattern (@codeatlasdev/ui demo #209, charts/pie) in my app.
Call get_demo({ ids: ["#209"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Comparing category sizes in a rose layout instead of a plain pie.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- PieChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<PieChart data={roseData} rose height="340px" />`
- `roseData` has 6 items with `value` and `name`: Analytics `72`, Automation `58`, Security `45`, Integrations `38`, Storage `30`, Support `22`
- Wrapped in `<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 - PieChart
@codeatlasdev/ui/charts
How it is built
- `<PieChart data={roseData} rose height="340px" />`
- `roseData` has 6 items with `value` and `name`: Analytics `72`, Automation `58`, Security `45`, Integrations `38`, Storage `30`, Support `22`
- Wrapped in `<Card full>`
Related
Loading source.