📊 Chart.js 3 for Vue 2 and Vue 3

This package is a rewrite of vue-chartjs for Chart.js 3, but written in Typescript with Vue 3 composition api in mind.

• Vite.js and Nuxt 3 compatible 💯.

Documentation

Full documentation

Installation

For Vue 3

npm i vue-chart-3 chart.js
#or
yarn add vue-chart-3 chart.js
#or
pnpm i vue-chart-3 chart.js

For Vue 2

npm i vue-chart-3@legacy chart.js
#or
yarn add vue-chart-3@legacy chart.js
#or
pnpm i vue-chart-3@legacy chart.js

Important notes

Using with Vue 3 or Vue 2

This package works with version 2.x and 3.x of Vue.

• Vue 3 works out-of-the-box
• Vue 2 requires @vue/composition-api package to also be installed and registered, to provide Vue 3's Composition API features like ref, defineComponent, computed, reactive.

Demos

• Vue 3: CodeSandbox demo Vue 3
• Vue 2 + composition API: CodeSandbox demo Vue 2 + composition
• Vue 2 + Typescript + class API CodeSandox demo Vue 2 + class
• Nuxt 2 + SSR CodeSandbox demo Nuxt 2 + SSR

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.4.7 (2021-07-18)

• chartInstance is now accessible by reference to the component!

0.4.5 (2021-07-18)

• Fixed call stack loop when using reactive options using data or ref
• Fixed bundle size thanks to @DRoet

0.4.1 (2021-07-16)

• Fixed component names taking chartId instead of chartType

0.4.0 (2021-07-16)

Breaking changes

• Renamed data prop to chartData due to type merging issues

Features

• All components are now correctly typed if using Volar on VSCode
• Added ExtractComponentData utility type
• Added ExtractComponentProps utility type
• Reactive options

0.4.0-alpha.1 (2021-07-15)

• Prepare 0.4.0

Features

• only import lodash functions that are being used (6dacf7c)