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 initChart variants
Live preview of all chart types and all variants in one page.
Switch text direction for RTL/LTR preview.
Bar Chart (9 variants)
Default
Stacked
Horizontal
Jan120
Feb200
Mar150
Apr280
May220
Jun310
Grouped
Rounded
Gradient
Striped
Glass
Neon
Line Chart (9 variants)
Default
Smooth
Dashed
Area
Dots
Gradient Area
Multi Color
Glow
Stepped
Pie Chart (7 variants)
Default
Desktop55%
Mobile30%
Tablet15%
Donut
Desktop55%
Mobile30%
Tablet15%
Half
Desktop55%
Mobile30%
Tablet15%
Labeled
Desktop55%
Mobile30%
Tablet15%
Nested
Desktop55%
Mobile30%
Tablet15%
Exploded
Desktop55%
Mobile30%
Tablet15%
Rose
Desktop55%
Mobile30%
Tablet15%
Area Chart (7 variants)
Default
Gradient
Stacked
Stepped
Sparkline
Range
Glow
Radar Chart (6 variants)
Default
Filled
Dots
Multi
Rounded
Glow
Scatter Chart (6 variants)
Default
Bubble
Colored
Line Connected
Clustered
Glow
Gauge Chart (6 variants)
Default
Gradient
Segmented
Mini
Multi Ring
Speedometer
Funnel Chart (6 variants)
Default
Smooth
Striped
Gradient
Flat
Pyramid
Treemap Chart (5 variants)
Default
Rounded
Gradient
Bordered
Labeled
Candlestick Chart (5 variants)
Default
Hollow
Colored
Minimal
Heikin Ashi
Waterfall Chart (4 variants)
Default
Colored
Stacked
Bridge
Heatmap Chart (4 variants)
Default
Rounded
Gradient
Labeled
Polar Area Chart (4 variants)
Default
North55
East70
South42
West63
Outlined
North55
East70
South42
West63
Gradient
North55
East70
South42
West63
Spaced
North55
East70
South42
West63
Radial Bar Chart (4 variants)
Default
A60
B45
C80
D30
Gradient
A60
B45
C80
D30
Rounded
A60
B45
C80
D30
Thin
A60
B45
C80
D30
Bump Chart (4 variants)
Default
Smooth
Dots
Thick
Sankey Chart (3 variants)
Default
Curved
Gradient
Donut Progress Chart (4 variants)
Default
Complete65
In Progress20
Pending15
Gradient
Complete65
In Progress20
Pending15
Thin
Complete65
In Progress20
Pending15
Thick
Complete65
In Progress20
Pending15