Chart

SVG-based data visualization component supporting bar, line, area, step, donut, and radar chart types.

// Plain markup
import { Chart } from "@shavin/ui";

Bar Mixed (Category Colors)

069138206275ChromeSafariFirefoxEdgeOther

Bar Multiple (Grouped Series)

076153229305JanFebMarAprMayJun

Bar Negative (Bi-directional Zero-Baseline)

-290-10580265450MonTueWedThuFriSat

Line Step (Orthogonal Curves)

0105210315420JanFebMarAprMayJun

Donut Active (Pie / Donut Highlight)

925Total

Radar Dots (Vertex Points)

DesignCodeUsabilitySpeedA11ySEO

Radar Grid Circle (Concentric Ring Axes)

DesignCodeUsabilitySpeedA11ySEO

Standard Bar & Area Charts

Bar
0105210315420JanFebMarAprMayJun
Area
0105210315420JanFebMarAprMayJun

Props

PropTypeDefault
data*ChartDataItem[]
type| "bar"
seriesChartSeriesConfig[]

* required

Configure Theme
Theme
Accent Color
Custom
Gray Family
Appearance
Radius
Scaling
Panel Style
Heading Font
Body Font