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 initLine chart variants
Full line chart variants including glow, stepped, multi-color, and gradient area.
Switch direction for RTL/LTR rendering.
Install with:
npx afnoui add charts/line/defaultLineChart - Default
Default
Install with:
npx afnoui add charts/line/smoothLineChart - Smooth
Smooth
Install with:
npx afnoui add charts/line/dashedLineChart - Dashed
Dashed
Install with:
npx afnoui add charts/line/areaLineChart - Area
Area
Install with:
npx afnoui add charts/line/dotsLineChart - Dots
Dots
Install with:
npx afnoui add charts/line/gradient-areaLineChart - Gradient Area
Gradient Area
Install with:
npx afnoui add charts/line/multi-colorLineChart - Multi Color
Multi Color
Install with:
npx afnoui add charts/line/glowLineChart - Glow
Glow
Install with:
npx afnoui add charts/line/steppedLineChart - Stepped