Copy link to headline:@sit-onyx/chartjs-plugin
.
Please visit the Chart.js documentation(opens in a new tab) for further information how to implement charts.
Copy link to headline:Changelog
A full changelog can be found here.
Copy link to headline: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
Copy link to headline:Installation
Install the npm package with your corresponding package manager:
Copy link to headline:Usage
Copy link to headline:Example charts
The source code for the chart examples below can be found on GitHub(opens in a new tab).
The following examples assume you have also installed vue-chartjs.
Copy link to headline:Bar
Copy link to headline:Bubble
Copy link to headline:Doughnut
Copy link to headline:Line
Copy link to headline:Pie
Copy link to headline:Polar area
Copy link to headline:Radar
Copy link to headline:Scatter
Copy link to headline: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: