Vue 2/3 Wrapper For Chart.js 3+

Install & Download:

# Yarn
$ yarn add vue-chart-3
# NPM
$ npm i vue-chart-3 --save

Description:

This is the rewritten version of the apertureless’ vue-chartjs that makes it easy to create Chart.js 3+ based chart components.

How to use it:

1. Import the necessary resources.

import { computed, ref } from "vue";
import { DoughnutChart } from "vue-chart-3";
import { Chart, ChartData, ChartOptions, registerables } from "chart.js";

2. Register the component.

Chart.register(...registerables);

3. Create a donut chart.

<DoughnutChart ref="doughnutRef" :chartData="testData" :options="options" />

export default {
  name: "App",
  components: { DoughnutChart },
  setup() {
    const dataValues = ref([30, 40, 60, 70, 5]);
    const toggleLegend = ref(true);
    const doughnutRef = ref();
    const testData = computed<ChartData<"doughnut">>(() => ({
      labels: ["Paris", "Nîmes", "Toulon", "Perpignan", "Autre"],
      datasets: [
        {
          data: dataValues.value,
          backgroundColor: [
            "#77CEFF",
            "#0079AF",
            "#123E6B",
            "#97B0C4",
            "#A5C8ED",
          ],
        },
      ],
    }));
    const options = computed<ChartOptions<"doughnut">>(() => ({
      scales: {
        myScale: {
          type: "logarithmic",
          position: toggleLegend.value ? "left" : "right",
        },
      },
      plugins: {
        legend: {
          position: toggleLegend.value ? "top" : "bottom",
        },
        title: {
          display: true,
          text: "Chart.js Doughnut Chart",
        },
      },
    }));
    return {
      testData,
      options,
      doughnutRef,
    };
  },
};

4. Available props.

options: { type: Object as PropType<ChartOptions<TType>>, required: false },
chartId: { default: chartId, type: String },
width: { default: 400, type: Number },
height: { default: 400, type: Number },
cssClasses: { type: String, default: '' },
styles: { type: Object as PropType<StyleValue> },
plugins: { type: Array as PropType<Plugin[]>, default: () => [] },
chartData: { type: Object as PropType<ChartData<TType>>, required: true },
onLabelsUpdate: { type: Function as PropType<() => void> },
onChartUpdate: { type: Function as PropType<(chartInstance: Chart<TType>) => void> },
onChartDestroy: { type: Function as PropType<() => void> },
onChartRender: { type: Function as PropType<(chartInstance: Chart<TType>) => void> },