Basic usage

For each chart type, the library provides a chart factory that creates a chart instance.

import { BarChart, LineChart } from "@statistikzh/charts";

Every chart instance follows the same lifecycle: create it, give it data and options, update it as needed, and clean it up when you’re done.

Create a chart instance

Call the chart factory with the container element the chart should render into.

const chart = BarChart({
  el: document.getElementById("chart"),
});

The container element must be empty. Passing an element that already has children throws an error. See Chart instance for the exact conditions and messages.

The chart does not render anything yet.

Set data and options

Pass the data array and the options object with the set method.

chart.set({
  data: [],
  options: {},
});

Both are required the first time you call set. See Preparing data for the shape the data array must have, and Chart options for what belongs in options.

Update

Call set again with new values to update the chart. You can pass only data, only options, or both, whichever changed.

chart.set({
  data: newData,
});

Passing options replaces the previous options entirely; it is not merged with them. Any option you omit falls back to the library’s defaults, not to the value from a previous set call.

Clean up

Call cleanup when the chart is no longer needed. This removes the chart from the DOM and frees its resources, leaving the container element empty again.

chart.cleanup();

An empty container element is required to create a new chart in it, so call cleanup before replacing a chart rather than emptying the element by other means.