Charts

INFO

This component is adopted from PrimeVue. It's full documentation can be found here.

Installation

To use this component an installation of chart.js is required:

npm install chart.js

PrimeVue uses the Chart.js library that provides a variety of charts. its documentation can be found here.

Showcases

Doughnut Chart

Bar Chart

Utilities

Chart Colors

Chart colors are exported based on the theme you are currently using. They are made available as a js object as css variables are not usable with a html canvas. All available colors can be found in the figma design file.

import { chartColors } from "@xerius/codey-tailwind/theme/xerius/chart-colors";

Chart Legend Elements

import { xerChartLegendLabels, xerChartLegendTitle } from "@xerius/codey-components";

//...
const options: ChartOptions<"bar"> = {
  plugins: {
    legend: {
      title: {
        display: true,
        text: "My Bar Chart",
        ...(xerChartLegendTitle as any),
      },
      position: "top",
      labels: xerChartLegendLabels as any,
    },
  },
};
//...

When a legend is required on your chart, this object can be used to set the correct label and title options (font, size, ...). See examples for full usage.