@statistikzh/charts-lit

Lit web component wrappers around @statistikzh/charts, the reusable bar and line charts for the Canton of Zurich.

Documentation

Full documentation for the underlying charts — guides and a complete reference for every option — is available at statistikzh.github.io/charts.

Installation

npm install @statistikzh/charts-lit

Usage

Import the component you need and use it like any other custom element.

import "@statistikzh/charts-lit/bar-chart.js";

<zh-bar-chart></zh-bar-chart>

<script>
  const chart = document.querySelector("zh-bar-chart");

  chart.data = [
    { category: "A", value: 10 },
    { category: "B", value: 20 },
  ];

  chart.options = {
    bars: { orientation: "vertical" },
    xAxis: { dataKey: "category", type: "categorical" },
    yAxis: { dataKey: "value", type: "linear" },
  };
</script>

The chart is created once options is set and updated whenever data or options change afterwards. It is cleaned up automatically when the element is removed from the DOM, and re-created if it is reconnected.

Listen for the chart-initialized event if you need to know when the underlying chart instance is available:

chart.addEventListener("chart-initialized", () => {
  console.log(chart.chart); // the underlying ChartInstance
});

See Preparing data for the shape the data array must have.

Chart types

• <zh-bar-chart> — import from @statistikzh/charts-lit/bar-chart.js, horizontal or vertical, with grouped, stacked, and normalized variants. See the bar chart docs.
• <zh-line-chart> — import from @statistikzh/charts-lit/line-chart.js, for time series, with optional grouping. See the line chart docs.

Both elements can also be imported from the package root (@statistikzh/charts-lit), which registers both custom elements at once.

Maintainer

This library is maintained by the Office for Statistics and Data of the Canton of Zurich.

License

MIT