Get started

Install

npm install @martinomagnifico/tablechart

https://cdn.jsdelivr.net/npm/@martinomagnifico/tablechart@latest/dist/

Additional types

The column, bar, line, area, waterfall and donut charts are in the main script. If you use an additional type, such as the scatter chart, load it as well, before the charts are made.

If you use a build tool, import the type and add it with addType():

import { addType, init } from '@martinomagnifico/tablechart';
import { scatter } from '@martinomagnifico/tablechart/additional-types';
import '@martinomagnifico/tablechart/style.css';

addType('scatter', scatter);
init();

If you use a script tag, load tablechart-additional-types.js after tablechart.js. It adds all the additional types.

<link rel="stylesheet" href="tablechart.css">
<script src="tablechart.js"></script>
<script src="tablechart-additional-types.js"></script>
<script>
	Tablechart.init();
</script>

See Additional types.

Markup

A chart is a figure with data-chart and a table in it. Its figcaption is the title. The first cell of a row is the label, the second the value.

<figure data-chart="column">
	<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>

data-chart sets the chart type: column, bar, line, area, waterfall or donut, or an additional type such as scatter.

Start it

Call init() once the page has loaded. It makes a chart of every figure with data-chart.

import { init } from '@martinomagnifico/tablechart';
import '@martinomagnifico/tablechart/style.css';

init();

To change when a chart builds, pass options. See Options.

init({
	threshold: 0.5, // How much of a chart must be in view
	replay: false   // Build again when it scrolls back into view
});

Next

• Chart types
• Styling