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> },
Preview:
Changelog:
v3.1.8 (03/24/2022)
- Shitty release that remove a forgotten console.log
Download Details:
Author: victorgarciaesgi
Download Link: https://github.com/victorgarciaesgi/vue-chart-3/archive/refs/heads/main.zip
Official Website: https://github.com/victorgarciaesgi/vue-chart-3
Install & Download:
# Yarn
$ yarn add vue-chart-3
# NPM
$ npm i vue-chart-3 --save