vue-chart-3

Getting started

Introduction

vue-chart-3 is rewrite of vue-chartjs for Chart.js 3open in new window for Vue 2 & 3, but written in Typescript and Vue Composition API.

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
1
2
3
4
5

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
1
2
3
4
5

Important notes

Using with Vue 3 or Vue 2

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

For Vue 2 users, you will have to keep 2.x version of vue-chart-3

  • 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 APIopen in new window features like ref, defineComponent, computed, reactive.

⚠️ Since 2.0.3 (for Vue 2 users), Vue composition api will not register itself. Update your project if you didn't do it manually!

Chart.js (v3)

Chart.js v3 is now tree-shakable, so make sure to import and register the chart components you need. See Chart.js APIopen in new window for all available imports.

Learn more about Chart.js tree-shakingopen in new window

For example, if you want to create a Doughnut chart and tree-shake the unused other components, it might look like this:

import { Chart, DoughnutController, ArcElement, Tooltip } from 'chart.js';
Chart.register(DoughnutController, ArcElement, Tooltip);
1
2

Or if you want all components of Chart.js (but lose the benefits of tree-shaking), use this:

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
1
2

Unlike vue-chartjs, there is no need to re-create each component with mixins and reactive props, etc. with this package. Thanks to @vue/composition-api, all of this is possible just by importing the corresponding component.

(Thanks to @nwittweropen in new window for upgraded notes)