Pure SVG chart components — no external dependencies. Five types with enter animations, hover tooltips, legends, and full dark mode support.
{ Chart } from '/basix/js/chart.js'
Smooth Catmull-Rom bezier curves. Supports multiple series and hover tooltips.
Fills the region under the line with a translucent tint. Great for volume or cumulative data.
Vertical bars with multiple series side-by-side. Animate with a staggered grow effect.
Horizontal bars — ideal for ranked data or long category labels.
Per-slice hover pop-out and percentage legend. Slices animate with staggered scale + fade.
Applies to line and area charts via the curve option.
smooth
linear
step
| Option | Type | Default | Description |
|---|---|---|---|
type | line | area | column | bar | pie | — | Chart type to render. |
series | Array<{name, data[]}> | — | One or more data series. Each has a name and an array of { label, value } data points. |
height | number | 280 | Inner chart height in px. |
showLegend | boolean | true | Show the legend below the chart. |
showGrid | boolean | true | Show horizontal grid lines. |
animate | boolean | true | Enable enter animations. |
curve | smooth | linear | step | 'smooth' | Line interpolation style for line and area charts. |
yMin | number | 0 | Fixed y-axis minimum. |
yMax | number | auto | Fixed y-axis maximum. Defaults to max value × 1.1. |