Chart
Lightweight, responsive SVG charts for dashboards and data summaries. Use the chart family for trends, comparisons, and composition without adding a charting dependency.
Line chart
A highlighted trend with a second semantic series. Move the pointer across the plot: a crosshair snaps to the nearest point and a tooltip shows its value.
Weekly signups
New accounts over the last seven days
| Signups, Mon | 42 |
|---|---|
| Signups, Tue | 68 |
| Signups, Wed | 54 |
| Signups, Thu | 86 |
| Signups, Fri | 73 |
| Signups, Sat | 92 |
| Signups, Sun | 78 |
| Previous week, Mon | 42 |
| Previous week, Tue | 60 |
| Previous week, Wed | 38 |
| Previous week, Thu | 86 |
| Previous week, Fri | 65 |
| Previous week, Sat | 76 |
| Previous week, Sun | 78 |
Animated update
Series transition to their new shape when the data changes. Press the button to re-roll the values and watch the line and its area fill move.
Weekly signups
New accounts over the last seven days
| Signups, Mon | 42 |
|---|---|
| Signups, Tue | 68 |
| Signups, Wed | 54 |
| Signups, Thu | 86 |
| Signups, Fri | 73 |
| Signups, Sat | 92 |
| Signups, Sun | 78 |
Area fill
area draws a soft gradient under each line; curve defaults to a monotone 'smooth' cubic that never overshoots the data. strokeWidth sets the line weight.
Revenue
Weekly revenue with an area fill
| Revenue, Mon | 42 |
|---|---|
| Revenue, Tue | 68 |
| Revenue, Wed | 54 |
| Revenue, Thu | 86 |
| Revenue, Fri | 73 |
| Revenue, Sat | 92 |
| Revenue, Sun | 78 |
- curve='linear' joins the points with straight segments - the honest choice for step data or sparse samples, where a curve would imply values between them
Bar chart
Use bars for compact comparisons between categories or periods.
New customers
| Customers, Mon | 42 |
|---|---|
| Customers, Tue | 68 |
| Customers, Wed | 54 |
| Customers, Thu | 86 |
| Customers, Fri | 73 |
| Customers, Sat | 92 |
| Customers, Sun | 78 |
Dashboard card: highlight, average, and headline
highlight mutes every other bar and tags the emphasised one with its value and a pilled axis label; average draws a dotted reference line. icon, headline, and stats give the chart a dashboard-card header, and formatValue formats every printed figure.
Revenue
This week
$493kUp12%vs last week
- Best day
- Sat
- Daily average
- $70k
| Revenue, Mon | $42k |
|---|---|
| Revenue, Tue | $68k |
| Revenue, Wed | $54k |
| Revenue, Thu | $86k |
| Revenue, Fri | $73k |
| Revenue, Sat | $92k |
| Revenue, Sun | $78k |
- headline.value and stats values are strings you format yourself; formatValue covers the axis, the tooltips, the value tag and the screen-reader table
- highlight also accepts an array of labels; deltaTrend='down' turns the headline pill red
- Every chart takes the same header props - LineChart and DonutChart included
Donut chart
A composition summary with a center total. Hover a segment to thicken it and see its value and share; the list beside the ring is the legend, with each share as a percentage.
Team distribution
| Values, Design | 42 |
|---|---|
| Values, Engineering | 56 |
| Values, Operations | 30 |
- The ring draws in clockwise on mount, and its segments and figures travel to new data
Formatted figures and center label
formatValue formats the legend, the tooltip and the default center total. centerLabel replaces the center figure, for a compact form of a long total.
Quarterly budget
| Values, Payroll | $48,200 |
|---|---|
| Values, Marketing | $21,900 |
| Values, Hosting | $12,600 |
| Values, Travel | $6,300 |
- The center fits about five characters before it truncates, which is what centerLabel is for
- centerLabel is a fixed string, so unlike the default total it does not count between data sets
- Pin a locale in formatValue for server-rendered pages - the default toLocaleString() can format differently on the server and in the browser
Loading and empty states
Loading
Empty
Charts use theme tokens, remain responsive inside narrow cards, and include a screen-reader table alternative. A line or bar plot is a single tab stop: the arrow keys move a cursor along a series and between series, and Escape releases it.
API reference
One entry per line. Changing the values animates the plot to its new shape.
Controls on the trailing edge of the header - typically ghost `IconButton`s.
Fills under each line with a soft fade of its own color. Off by default: stacked translucent fills read as mud beyond one or two series.
`"smooth"` (default) draws a monotone cubic curve through the points. `"linear"` uses straight segments - the honest choice when intermediate values must not be implied (step, sparse data).
A line under the title saying what the figures are.
Forces the "no data" message even when `series` has content.
Formats every printed figure (ticks, tooltips, data table); omitted, `toLocaleString` in `locale`. Use it for currency, units or precision. Must return the same string on server and client.
The dashboard-card figure under the title: a big number with a change pill.
A small glyph before the title.
Lists the series names with their colour swatches under the plot.
Shows pulsing placeholder bars instead of the plot, for an async load.
BCP 47 locale for default formatting. Default `"en-US"`: fixed, so server and client can't print "1,234" vs "1.234" and fail hydration. Pass the user's locale; ignored with `formatValue`.
Draws a marker at every data point.
A row of label/value pairs under the title ("Visit duration · 1m 35s").
Stroke width in viewBox units. Default 3.5.
Heading above the plot. Also becomes the plot's accessible name and its data table's caption.
Also accepts everything from ChartBaseProps.
BarChart props
One entry per bar group. Changing the values animates the bars to their new heights.
Controls on the trailing edge of the header - typically ghost `IconButton`s.
Draws a dotted reference line at this value with a small tag - an average, target, budget.
Names the `average` line's tag. Default "Avg".
A line under the title saying what the figures are.
Forces the "no data" message even when `series` has content.
Formats every printed figure (ticks, tooltips, data table); omitted, `toLocaleString` in `locale`. Use it for currency, units or precision. Must return the same string on server and client.
The dashboard-card figure under the title: a big number with a change pill.
Labels of the bars to emphasise: they keep their series colour, get a value tag and a pilled x-axis label, and every other bar is muted. Omit to colour every bar.
A small glyph before the title.
Lists the series names with their colour swatches under the plot.
Shows pulsing placeholder bars instead of the plot, for an async load.
BCP 47 locale for default formatting. Default `"en-US"`: fixed, so server and client can't print "1,234" vs "1.234" and fail hydration. Pass the user's locale; ignored with `formatValue`.
A row of label/value pairs under the title ("Visit duration · 1m 35s").
Heading above the plot. Also becomes the plot's accessible name and its data table's caption.
Also accepts everything from ChartBaseProps.
DonutChart props
The slices. Changing the values animates the ring and its figures.
Controls on the trailing edge of the header - typically ghost `IconButton`s.
Overrides the figure in the ring's hole. Defaults to the formatted total.
A line under the title saying what the figures are.
Forces the "no data" message even when `series` has content.
Formats every printed figure (ticks, tooltips, data table); omitted, `toLocaleString` in `locale`. Use it for currency, units or precision. Must return the same string on server and client.
The dashboard-card figure under the title: a big number with a change pill.
A small glyph before the title.
Lists the series names with their colour swatches under the plot.
Shows pulsing placeholder bars instead of the plot, for an async load.
BCP 47 locale for default formatting. Default `"en-US"`: fixed, so server and client can't print "1,234" vs "1.234" and fail hydration. Pass the user's locale; ignored with `formatValue`.
A row of label/value pairs under the title ("Visit duration · 1m 35s").
Heading above the plot. Also becomes the plot's accessible name and its data table's caption.
Also accepts everything from ChartBaseProps.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent