CLI setup for chart code on this page
If you copy code from the Snippet or Component tabs, run the command below first so your project has the AfnoUI base layout and UI primitives those snippets expect (utilities, Tailwind tokens, shared chart helpers, and so on).
If you install a chart with afnoui add charts/<type>/<variant> instead, you do not need this step—that command pulls the registry bundle and dependencies for that variant on its own.
Install with:
npx afnoui initPie chart variants
Full pie chart variants including rose, exploded, nested and half views.
Switch direction for RTL/LTR rendering.
Install with:
npx afnoui add charts/pie/defaultPieChart - Default
Default
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/donutPieChart - Donut
Donut
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/halfPieChart - Half
Half
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/labeledPieChart - Labeled
Labeled
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/nestedPieChart - Nested
Nested
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/explodedPieChart - Exploded
Exploded
Desktop55%
Mobile30%
Tablet15%
Install with:
npx afnoui add charts/pie/rosePieChart - Rose
Rose
Desktop55%
Mobile30%
Tablet15%