vue-chart-3

📊 A simple wrapper around Chart.js 3 for Vue 2 & 3

🌟 Show real-time usage chart on vue-chart-3's README.md, just copy the code below.

## Usage Trend
[![Usage Trend of vue-chart-3](https://npm-compare.com/img/npm-trend/THREE_YEARS/vue-chart-3.png)](https://npm-compare.com/vue-chart-3#timeRange=THREE_YEARS)

🌟 Show GitHub stars trend chart on vue-chart-3's README.md, just copy the code below.

## GitHub Stars Trend
[![GitHub Stars Trend of vue-chart-3](https://npm-compare.com/img/github-trend/vue-chart-3.png)](https://npm-compare.com/vue-chart-3)

Package	Downloads	Stars	Size	Issues	Publish	License

vue-chart-3	39,081	319	46.8 kB	29	-	MIT

vue-chart-3

📊 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