Tablechart

What is it?

Tablechart makes a chart from a table in each figure (that has data-chart) on your page, while the table itself gets hidden. Assistive devices can keep reading the table instead of the chart.

A chart appears when it scrolls into view, but you can change the threshold so that it is always visible.

<figure data-chart="column">
	<figcaption><b>Apples picked</b><br><span>thousands</span></figcaption>
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
		</tbody>
	</table>
</figure>

What makes it different

• The data is a table. You write a table in your HTML, or in Markdown, or in a JSON file. You do not write JavaScript for each chart.
• The table stays on the page. Screen readers, search engines and translation scripts read it. If JavaScript does not run, the table is shown instead of the chart (if written with a table, not generated from JSON).
• The text is real and styleable text. Numbers, names and titles are HTML. They use the font of your page, stay sharp when the page is zoomed or scaled, and can be translated. No more Times New Roman in your charts.
• Styled with CSS. A chart uses the text colour of the page. Colours, sizes and light and dark mode are CSS variables.
• Annotations follow the data. A bracket or a trend arrow is placed by the numbers. If you change a number, the annotation moves with it.
• Small. About 32 kB of JavaScript and CSS together, gzipped.
• The result is also small. If Tablechart is used in a document that is converted to PDF, then the chart is still just vectors and text, not a bitmap image. Small and sharp at any zoom level.

Compared to Chart.js and D3

A canvas has a fixed number of pixels, so a canvas chart becomes blurry when a page is zoomed or scaled up with CSS. SVG and HTML text stay sharp.

D3 is a toolkit for making charts, not a chart library. A bar chart in D3 is a few dozen lines of JavaScript. In Tablechart, it is a table and a data-chart attribute.

Next

See How it works, or Get started to add it to your page.