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 initBar chart variants
Complete bar chart set including horizontal, gradient, glass, striped, and neon styles.
Switch direction for RTL/LTR rendering.
Install with:
npx afnoui add charts/bar/defaultBarChart - Default
Default
Install with:
npx afnoui add charts/bar/stackedBarChart - Stacked
Stacked
Install with:
npx afnoui add charts/bar/horizontalBarChart - Horizontal
Horizontal
Jan120
Feb200
Mar150
Apr280
May220
Jun310
Install with:
npx afnoui add charts/bar/groupedBarChart - Grouped
Grouped
Install with:
npx afnoui add charts/bar/roundedBarChart - Rounded
Rounded
Install with:
npx afnoui add charts/bar/gradientBarChart - Gradient
Gradient
Install with:
npx afnoui add charts/bar/stripedBarChart - Striped
Striped
Install with:
npx afnoui add charts/bar/glassBarChart - Glass
Glass
Install with:
npx afnoui add charts/bar/neonBarChart - Neon