@sit-onyx/chartjs-plugin

A Chart.js plugin for the onyx design system created by Schwarz IT.

Please visit the Chart.js documentation for further information how to implement charts.

Changelog

A full changelog can be found here.

Features

The following features are included in this plugin:

• Set default colors/styles for charts, labels, borders etc.
• Update chart when switched between light/dark mode
• Default dataset colors based on the onyx color palette colors
• Utility to set the dataset color to one of the onyx color palette colors

Installation

Install the npm package with your corresponding package manager:

pnpm

pnpm add @sit-onyx/chartjs-plugin@beta chart.js

npm

npm install @sit-onyx/chartjs-plugin@beta chart.js

yarn

yarn install @sit-onyx/chartjs-plugin@beta chart.js

Usage

import { Chart, registerables } from "chart.js";
import { registerOnyxPlugin } from "@sit-onyx/chartjs-plugin";
import "sit-onyx/style.css";

// register default Chart.js plugins
Chart.register(...registerables);

// register custom onyx plugin
registerOnyxPlugin(Chart);

Example charts

The source code for the chart examples below can be found on GitHub.

The following examples assume you have also installed vue-chartjs.

pnpm

pnpm add vue-chartjs

npm

npm install vue-chartjs

yarn

yarn install chart.js

Bar

Bubble

Doughnut

Line

Pie

Polar area

Radar

Scatter

Custom dataset colors

By default, the dataset colors will be automatically set in order based on the onyx quantitative colors. If you want to set a specific color for a dataset, you can use the getDatasetColors utility.

For example to use the primary color for a line chart:

const chartData: ChartData<"line"> = {
  labels: ["A", "B", "C"],
  datasets: [
    {
      label: "Dataset A",
      data: [1, 2, 3],
      ...getDatasetColors("primary"),
    },
  ],
};