Studio
2

Chart

Installation

pnpm dlx @mielui/svelte add chart

Usage

Root owns data, config, and the category field x. Each config entry gives a numeric series a label, a color, and an optional value formatter. Match each mark key to its data field and config entry.

Plot establishes the scales. Put Grid, XAxis, YAxis, and marks inside it. Place Legend and Tooltip directly inside Root; either can move or be omitted.

String categories use equal spacing. Numeric and Date categories retain their relative distance. Sort time-series data before rendering. Null, missing, and non-finite numeric values leave gaps.

Chart types

Bar chart

Compare categories with grouped or stacked bars.

Line chart

Follow changes over time without a filled area.

Area chart

Show the amount over time with a filled series.

Mixed chart

Compare totals and benchmarks in one plot.

Loading and empty data

Set loading on Root while a request is pending. The chart keeps its height and displays a neutral skeleton. An empty dataset shows an empty state instead of fabricated values. Try each state below.

Animation

The default reveal runs on entry. Data changes transition from the current display. Set animation="live" for a traveling line highlight, a sweep through the area fill, or subtle staggered highlights rising through the bars, with quiet intervals between passes. Highlights disappear while inspecting values. Motion pauses offscreen or when the tab is hidden. Set animation="none" to disable chart motion.

Tooltips inherit the theme’s border and glass settings. Chart motion follows reduced-motion preferences and the theme motion setting. Every chart-type guide includes a live example so you can compare the effect on different marks.

Accessibility

Give Root a descriptive aria-label. Root includes a screen-reader data table. Tab to the category controls to inspect the same values available by pointer. Escape dismisses the tooltip.

API reference

Chart.Root

Prop Type Default
aria-label Required string

Defines a string value that labels the current element.

 —
data Required readonly T[] —
config Required { [x: string]: { label: string; color?: string | undefined; format?: ((value: number) => string) | undefined; }; } —
x Required string —
orientation "horizontal" | "vertical" | undefined 'vertical'
stacked boolean | undefined false
loading boolean | undefined false
animation "none" | "reveal" | "live" | undefined 'reveal'
children Snippet<[]> | undefined —

Chart.Area

Prop Type Default
key Required string —
class string | undefined —
strokeWidth number | undefined —

Chart.Bar

Prop Type Default
key Required string —
class string | undefined —
radius number | undefined 4

Chart.Grid

Prop Type Default
class string | undefined —
ticks number | undefined 5

Chart.Legend

Prop Type Default
class string | undefined —
children Snippet<[{ key: string; label: string; color: string; }]> | undefined —

Chart.Line

Prop Type Default
key Required string —
class string | undefined —
strokeWidth number | undefined —

Chart.Plot

Prop Type Default
children Snippet<[]> | undefined —
empty Snippet<[]> | undefined —
loading Snippet<[]> | undefined —

Chart.Tooltip

Prop Type Default
class string | undefined —
children Snippet<[{ label: string; values: { key: string; label: string; value: number; formatted: string; color: string; }[]; }]> | undefined —

Chart.XAxis

Prop Type Default
class string | undefined —
ticks number | undefined —
format ((value: string | number) => string) | undefined —

Chart.YAxis

Prop Type Default
class string | undefined —
ticks number | undefined —
format ((value: string | number) => string) | undefined —