Reference

init()

init() makes a chart of every figure that matches selector, and builds each chart when it scrolls into view. It returns a promise.

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

const tablechart = await init(options, root);

Argument	Is
`options`	The options. Optional.
`root`	The element to look for charts in. `document` by default.

If you call init() again, it skips the figures that are already charts. To make charts of figures that are added to the page later, call it again with the element that holds them as root, or use create().

What it returns

Property	Is
`charts`	A list of the charts it made. See One chart.
`refresh()`	Lays out every chart again, for example after a script has changed the text of a chart
`destroy()`	Stops watching scroll, size and language. The charts stay as they are.

create()

create() makes a chart of one figure, and builds it when it scrolls into view. It returns a promise with the chart, or null if the figure has no data to draw. If the figure is already a chart, it returns that chart.

import { create } from "@martinomagnifico/tablechart";

const chart = await create(document.querySelector("#sales"), {
	threshold: 0.3
});

The options are the same as for init(). selector is not used.

addType()

addType() adds one of the additional types. The first argument is the value of data-chart, the second the type. Add it before init() or create(). See Extras.

import { addType, init } from "@martinomagnifico/tablechart";
import { scatter } from "@martinomagnifico/tablechart/additional-types";

addType("scatter", scatter);
init();

With a script tag it is Tablechart.addType(). tablechart-additional-types.js calls it by itself.

One chart

Each chart that init() or create() makes is also on its element, as tablechart.

document.querySelector("#sales").tablechart.refresh();

Property	Is
`figure`	The figure of the chart
`refresh()`	Lays the chart out again
`destroy()`	Stops watching scroll, size and language for this chart. The chart stays as it is, and `tablechart` is removed from the element.
`next()`	On a chart that steps: shows one step more. See Step by step.
`previous()`	On a chart that steps: shows one step less
`stepTo(step)`	On a chart that steps: shows it up to `step`, from `0` to `steps`
`step`	How many steps are shown
`steps`	How many steps the chart has: `0` for a chart that does not step

A chart that steps sends a tablechart:step event from its figure at each step, with step and steps in event.detail.

Building blocks

For a script or a plugin that decides itself when a chart is built and shown, @martinomagnifico/tablechart/core has the steps that init() and create() take.

import { prepare, build, layout, setShown, defaultConfig } from "@martinomagnifico/tablechart/core";

const config = { ...defaultConfig };
const [figure] = await prepare([element], config);
const chart = build(figure, config);

// Once the chart has a width:
layout(chart, config);
setShown(chart, true);

Function	Does
`prepare()`	Turns elements into figures with a table: a table from Markdown, or the data of a JSON file. Adds translation keys.
`build()`	Makes everything in the chart, with its text. It needs no width.
`layout()`	Places everything. Run it again when the width changes.
`setShown()`	Starts the animation, or shows the chart whole.
`relabel()`	Formats the numbers again, for example after a language change.
`unbuild()`	Removes what `build()` made, so the chart can be built again.
`stepTo()`	Shows a chart that steps up to a step. A presentation plugin calls it for its own steps, with `controls` set to `false`.

build() also gives the chart its tooltip, as the tooltip option says. unbuild() closes it.

init() and create() get every chart ready for print. With the building blocks, do that yourself before the page prints: add PRINTING_CLASS to the figure, so the chart has no transitions, and show it. Remove the class after printing.

import { setShown, PRINTING_CLASS } from "@martinomagnifico/tablechart/core";

window.addEventListener("beforeprint", () => {
	chart.figure.classList.add(PRINTING_CLASS);
	setShown(chart, true);
});
window.addEventListener("afterprint", () => chart.figure.classList.remove(PRINTING_CLASS));

With a script tag

Without a build tool, load tablechart.js and tablechart.css. Tablechart.init() and Tablechart.create() work the same as init() and create().

HTML

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

Defaults

defaultConfig holds the default options.

import { defaultConfig } from "@martinomagnifico/tablechart";

TypeScript

TablechartConfig describes the options, TablechartInstance what init() returns, and TablechartChart one chart.

import type { TablechartConfig, TablechartInstance, TablechartChart } from "@martinomagnifico/tablechart";

API