How it works

From table to chart

On the leftAt the top is a table. On the rightUnder it is the chart that Tablechart makes from that same table.

1. You call init(). Tablechart finds every figure with data-chart.
2. It reads the table in it. The first cell of a row is the name, the other cells are the values.
3. It hides the table from view and adds the chart. Screen readers still read the table, and a translation script still finds the names in it.
4. When the chart scrolls into view, it builds.

Animation

By default, a chart builds with an animation when it scrolls into view: when half of the chart is in view. To change how much must be in view, set threshold, from 0 to 1.

If replay is true, a chart builds again each time it scrolls back into view. If not, it builds once.

init({
	threshold: 0.5,
	replay: false
});

The button builds this chart again.

If you want a chart on the page from the start, without animation, add data-chart-animate="false" to the figure. The chart is then shown as soon as the page is ready, also when it is not in view.

<figure data-chart="column" data-chart-animate="false">

To do this for every chart, set the animate option to false. See No animation.

init({ animate: false });

Inside an animated container

If a chart is inside an element that animates in, for example with a CSS animation, the chart builds when that animation is halfway. Then the chart builds in a container that can already be seen. See Animated parents.

Text

All text in a chart is HTML: the title, the names and the numbers. It uses the font of the page. Only the bars, lines and slices are SVG.

To see it, zoom in on this page. The numbers and names stay sharp, and keep the size of the text around them.

Size

A chart fills the width of its container. Its height is a share of its width, set with data-chart-aspect, but never less than --tablechart-min-height, 200px by default. If the width changes, the chart is laid out again.

The buttons change the width of the example.

Reduced motion and print

If the visitor prefers reduced motion, charts build without animation. When the page is printed, every chart is shown whole, also a chart that has not scrolled into view yet.

Accessibility

Screen readers read the table, not the drawing. See Accessibility.

Next

See Get started to add Tablechart to your page.