Chart
A self-developed SVG chart component (no third-party chart engine) supporting line / bar / pie / area / donut / stacked-bar. Data updates redraw automatically, and animations are disabled under prefers-reduced-motion.
Line Chart
Line chart (default)
The default is type="line". An array [{label, value}] is a single series; hovering over a data point shows its value (native <title>).
Bar Chart
Bar chart
type="bar" renders grouped bars.
Pie Chart
Pie chart
type="pie" renders sectors, with the tooltip showing the percentage.
Donut Chart
Donut chart
type="donut" uses the same data format as the pie chart, with the middle hollowed out into a ring; the tooltip also shows percentages.
Area Chart
Area chart (smooth + legend)
type="area" fills a semi-transparent area between the line and the baseline (still readable with multiple series overlaid), and supports options.smooth for smooth curves.
Stacked Bar Chart
Stacked bar chart
type="stacked-bar" stacks multiple series from bottom to top into a single bar; the bar height equals the category total, and the y-axis ticks are computed from the totals.
Multiple Series + Legend
Multi-series line (smooth + legend)
The object format {labels, series:[{name, data}]} supports multiple series; the legend is shown by default for multiple series, and options.smooth enables smooth curves.
Empty Data
Empty data placeholder
No data / invalid JSON shows an empty state placeholder without errors.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
aria-label | Chart description (falls back to locale by type) | — | — |
data | Data. Array single-series [{label, value}] or object multi-series {labels, series} | unknown | — |
options | Config: smooth (smoothing), colors (series palette), showLegend | unknown | — |
type | Chart type: line / bar / pie / area / donut / stacked-bar | ChartType | line |
data / options also support the property channel (JS objects, taking precedence over attributes).
Engine Choice (Architecture Decision)
Self-developed SVG rendering, no third-party chart engine:
- Zero-dependency core selling point: zero third-party runtime dependencies is a core constraint of the library; self-developed SVG introduces no dependencies.
- Six types cover common scenarios: line/bar/pie/area/donut/stacked-bar cover the vast majority of dashboard/data-display scenarios; complex charts (scatter, composite coordinate systems, complex maps, etc.) are future enhancements, at which point the trade-off of introducing an engine will be re-evaluated.
- Consistent styling and theming: the in-house implementation can use the library's token palette entirely (including dark variants), staying unified with the library's visual language.
- Animations are pure CSS (wrapped in
@media (prefers-reduced-motion: no-preference)), auto-disabled under reduced-motion, with no JS timers and zero leaks.
Boundaries
- Data updates redraw the SVG (same pattern as qrcode), without rebuilding nodes
- Empty / invalid data → empty state placeholder
- Every data point carries a native
<title>tooltip; zero orphaned overlays