📊 Chart.js for Vue 2 and Vue 3

This package is a rewrite of vue-chartjs for Chart.js 3, but written in Typescript with vue-demi and Vue Composition API.

Compatibility

Chart.js >= 3
Compatible with Vue 2 with @vue/composition-api installed and registered
Compatible with Vue 3

It's recommended to use this with Volar on VSCode for better props types check

Demo

CodeSandbox demo

Installation

npm i vue-chart-3
#or
yarn add vue-chart-3

Usage

Chart.js 3 is now tree-shakable, so on your app, don't forgot to register the components you want

import { Chart, LineController, LineElement } from 'chart.js';

Chart.register(LineController, LineElement);

Or if you want all components

import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

At the difference of vue-chartjs, now there is no need to re-create each component with mixins and reactive props etc.. Thanks to Vue Composition Api, all of this is possible just by importing the corresponding component

Exemple with static data

<template>
  <Doughnut :data="testData" />
</template>

import { defineComponent } from 'vue';
import { Doughnut } from 'vue-chart-3';

export default defineComponent({
  name: 'Home',
  components: { Doughnut },
  setup() {
    const testData = {
      labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
      datasets: [
        {
          data: [30, 40, 60, 70, 5],
          backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
        },
      ],
    };

    return { testData };
  },
});

Exemple with reactive data

<template>
  <div>
    <Doughnut :data="testData" />
    <button @click="suffleData">Shuffle</button>
  </div>
</template>

import { shuffle } from 'lodash';
import { computed, defineComponent, ref } from 'vue';
import { Doughnut } from 'vue-chart-3';

export default defineComponent({
  name: 'Home',
  components: { Doughnut },
  setup() {
    const dataValues = ref([30, 40, 60, 70, 5]);

    const testData = computed(() => ({
      labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
      datasets: [
        {
          data: dataValues.value,
          backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
        },
      ],
    }));

    function shuffleData() {
      dataValues.value = shuffle(dataValues.value);
    }

    return { shuffleData, testData };
  },
});

Supporting plugins

You can use defineChartComponent to create ChartJs plugins components

Exemple:

import { defineChartComponent } from 'vue-chart-3';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';

Chart.register(MatrixController, MatrixElement);

const Matrix = defineChartComponent('MatrixChart', 'matrix');
// You can now use this component anywhere

If you are using Typescript, you have to augment the interface ChartTypeRegistry from chart.js manually.

The plugins for Chart.js are usually typed, but if they aren't you can do it manually

(Exemple taken from chartjs-chart-matrix)

declare module 'chart.js' {
  export interface ChartTypeRegistry {
    matrix: {
      chartOptions: CoreChartOptions<'matrix'>;
      datasetOptions: MatrixControllerDatasetOptions<'matrix'>;
      defaultDataPoint: MatrixDataPoint;
      parsedDataType: MatrixDataPoint;
      scales: never;
    };
  }
}

nwittwer / vue-chart-3