apertureless/vue-chartjsPublic

NotificationsYou must be signed in to change notification settings
Fork824
Star5.7k

📊 Vue.js wrapper for Chart.js

License

MIT license

5.7k stars 824 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 599 Commits
.github		.github
assets		assets
build		build
config		config
dist		dist
docs		docs
src		src
test		test
types		types
.babelrc		.babelrc
.codeclimate.yml		.codeclimate.yml
.commitlintrc		.commitlintrc
.czrc		.czrc
.editorconfig		.editorconfig
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.prettierrc		.prettierrc
.simple-git-hooks.json		.simple-git-hooks.json
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE.txt		LICENSE.txt
README.md		README.md
codecov.yml		codecov.yml
deploy-docs.sh		deploy-docs.sh
index.html		index.html
jest.config.json		jest.config.json
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

vue-chartjs

vue-chartjs is a wrapper forChart.js in vue. You can easily create reuseable chart components.

Demo & Docs

📺Demo
📖Docs

Compatibility

v1 later@legacy
- Vue.js 1.x
v2 later
- Vue.js 2.x

After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.If you're looking for v1 check thisbranch

Install

yarn install:yarn add vue-chartjs chart.js@2.9.4
npm install:npm install vue-chartjs chart.js@2.9.4

Or if you want to use it directly in the browser add

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script><scriptsrc="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

to your scripts. SeeCodepen

Browser

You can usevue-chartjs directly in the browser without any build setup. Like in thiscodepen. For this case, please use thevue-chartjs.min.js which is the minified version. You also need to add the Chart.js CDN script.

You can then simply register your component:

Vue.component('line-chart',{extends:VueChartJs.Line,mounted(){this.renderChart({labels:['January','February','March','April','May','June','July'],datasets:[{label:'Data One',backgroundColor:'#f87979',data:[40,39,10,40,39,80,40]}]},{responsive:true,maintainAspectRatio:false})}})

How to use

You need to import the component and then either useextends ormixins and add it.

You can import the whole package or each module individual.

importVueChartsfrom'vue-chartjs'import{Bar,Line}from'vue-chartjs'

Just create your own component.

// CommitChart.jsimport{Bar}from'vue-chartjs'exportdefault{extends:Bar,mounted(){// Overwriting base render method with actual data.this.renderChart({labels:['January','February','March','April','May','June','July','August','September','October','November','December'],datasets:[{label:'GitHub Commits',backgroundColor:'#f87979',data:[40,20,12,39,10,40,39,80,40,20,12,11]}]})}}

or in TypeScript

// CommitChart.tsimport{Component,Mixins}from'vue-property-decorator'import{Bar,mixins}from'vue-chartjs';import{Component}from'vue-property-decorator';@Component({extends:Bar,// this is important to add the functionality to your componentmixins:[mixins.reactiveProp]})exportdefaultclassCommitChartextendsMixins(mixins.reactiveProp,Bar){mounted(){// Overwriting base render method with actual data.this.renderChart({labels:['January','February','March','April','May','June','July','August','September','October','November','December'],datasets:[{label:'GitHub Commits',backgroundColor:'#f87979',data:[40,20,12,39,10,40,39,80,40,20,12,11]}]})}}

Then simply import and use your own extended component and use it like a normal vue component

importCommitChartfrom'path/to/component/CommitChart'

Another Example with options

You can overwrite the default chart options. Just pass the options object as a second parameter to the render method

// MonthlyIncome.vueimport{Line}from'vue-chartjs'exportdefault{extends:Line,props:['data','options'],mounted(){this.renderChart(this.data,this.options)}}

Use it in your vue app

importMonthlyIncomefrom'path/to/component/MonthlyIncome'<template><monthly-income :data={....}/></template><script>exportdefault{components:{ MonthlyIncome},  ....}</script>

Reactivity

Chart.js does not update or re-render the chart if new data is passed.However, you can simply implement this on your own or use one of the two mixins which are included.

reactiveProp
reactiveData

Both are included in themixins module.

The mixins automatically createchartData as a prop or data. And add a watcher. If data has changed, the chart will update.However, keep in mind the limitations of vue and javascript for mutations on arrays and objects.It is important that you pass your options in a local variable namedoptions!The reason is that if the mixin re-renders the chart it callsthis.renderChart(this.chartData, this.options) so don't pass in the options object directly or it will be ignored.

More infohere

// MonthlyIncome.jsimport{Line,mixins}from'vue-chartjs'exportdefault{extends:Line,mixins:[mixins.reactiveProp],props:['chartData','options'],mounted(){this.renderChart(this.chartData,this.options)}}

Mixins module

Themixins module is included in theVueCharts module and as a separate module.Some ways to import them:

// Load complete module with all chartsimportVueChartsfrom'vue-chartjs'exportdefault{extends:VueCharts.Line,mixins:[VueCharts.mixins.reactiveProp],props:['chartData','options'],mounted(){this.renderChart(this.chartData,this.options)}}

// Load separate modulesimport{Line,mixins}from'vue-chartjs'exportdefault{extends:Line,mixins:[mixins.reactiveProp],props:['chartData','options'],mounted(){this.renderChart(this.chartData,this.options)}}

// Load separate modules with destructure assignimport{Line,mixins}from'vue-chartjs'const{ reactiveProp}=mixinsexportdefault{extends:Line,mixins:[reactiveProp],props:['chartData','options'],mounted(){this.renderChart(this.chartData,this.options)}}

Single File Components

You can create your components in Vues single file components. However it is important that youdo not have the<template></template> included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.

Available Charts

Bar Chart

Line Chart

Doughnut

Pie

Radar

Polar Area

Bubble

Scatter

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# run unit testsnpm run unit# run all testsnpmtest

For a detailed explanation of how things work, check out theguide anddocs for vue-loader.