Animated HTML Charts: Bar, Line, Pie and Sparkline With Springs

Version 1.1 of motion-components adds a second new category next to Icons: Charts. It has three elements. <motion-chart> draws bar and line charts. <motion-pie> draws pie and donut charts. <motion-sparkline> draws a small trend line that fits inside a sentence.

All three follow one idea: the data is HTML, and every change in the data is a spring. You do not call a draw function. You write the numbers into an attribute, and when the numbers change, the chart moves to them.

A chart in one line

This is a complete page. Save it as index.html and open it in a browser.

The bars grow one after another when the chart scrolls into view. Hover a bar to see its value.

Three ways to give a chart its data

Way	Use it when	Example
Attributes	You have a few numbers.	values="12, 19, 8" labels="Mon, Tue, Wed"
A table	Your data is already a table, or a server or CMS renders it.	<motion-chart><table>…</table></motion-chart>
The data property	The data comes from JavaScript, an API or a framework.	chart.data = { labels, series }

The table is the most interesting one. Wrap any HTML table, and the chart reads it. The first column holds the labels, and every other column is one series:

The table stays in the page for screen readers. If your code changes a cell, the chart updates by itself.

Every change is a spring

Most chart libraries redraw or fade when the data changes. Here, each bar and each point springs from where it is to its new value:

If the data changes again in the middle of an animation, the chart does not jump to the end first. It turns around from its current position. This makes live data look calm, even when it updates every second.

Moment	What moves
Entrance	Bars grow one after another, lines draw in, pies sweep in clockwise.
New data	Bars, points and slices spring to their new values.
Hover	The tooltip springs from point to point. A hovered pie slice springs outward.

Bar and line charts

type is bar (the default) or line. For several series, separate them with ; and name them in series:

format uses the reader’s language for the axis, the tooltip and the screen reader text. It accepts compact, percent, currency:EUR and unit:kilometer, for example.

Pie and donut charts

<motion-pie> shows how a whole splits into parts. Add donut to show the total in the center:

A pie works best with a few slices. When there are more than six, the extra slices are combined into one slice called “Other”. To compare values that are close together, a bar chart is easier to read.

Sparklines

<motion-sparkline> is a small trend line with no axes. It takes the color of the text around it:

Put it next to motion-counter and you have a stat tile: a number that counts up above its trend.

Colors

The eight series colors are chosen to stay apart for readers with color blindness, in light mode and in dark mode. Each mode has its own set of colors, not an automatic inversion. Override them with --mc-chart-1 to --mc-chart-8:

Text, axes and gridlines use the text color, so the chart fits any theme.

Accessibility

What	How
Screen readers	They read the data as a table: your own table, or one the chart generates.
Keyboard	Press Tab to focus the chart, then the arrow keys to move between points. Each point is read out.
Name	Give every chart a label.
Reduced motion	The chart shows its final state at once and changes values without animation.

Recipes

The Chart Recipes page has six patterns you can copy, each with a live demo:

A stat tile with a number and a trend.
A week, month and year switcher.
A chart that follows a form.
Data loaded from a JSON file.
A budget donut with a month select.
A live line chart.

Get started

Read the motion-chart, motion-pie and motion-sparkline docs. Every code example on those pages works when you paste it into a page.