Installation

@statistikzh/charts can be installed in any project via npm or a CDN.

The library works in vanilla JavaScript and in reactive frameworks like React, Vue, Svelte, or Lit. See Framework integration for examples.

Installing with npm

If you have an existing project, you can install the library via npm:

npm install @statistikzh/charts

You can then import a chart factory in your JavaScript or TypeScript code:

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

Installing with a CDN

Use the library via a CDN. For example, include the following script tag in your HTML file.

<script type="module">
  import { BarChart } from "https://esm.sh/@statistikzh/charts@0";
</script>

The @0 suffix resolves to the latest 0.x release. For production, pin the exact version you tested against. The available versions are listed on npm.

Observable NotebooksAn example notebook demonstrating the usage of @statistikzh/charts in Observable using the CDN approach.

Note

Using a CDN is convenient for quick prototyping, but for production use, it is recommended to install the package via npm and bundle it with your application.

A CDN may also not be GDPR-compliant, depending on the provider.

Fonts

All charts use the “Inter” font family (regular and black weight) for text elements in the charts. The application using the library is responsible for loading the font.

The easiest way to load the font is to copy .woff2 and .css files from the @statistikzh/charts repository into your project and include the CSS file in your HTML.