vue-chart-js

vue-chart-js

Chart.js wrapper component based on Vue.

Works with Vue 2.*

Installation

Install via CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-chart-js"></script>

<script>
  Vue.use(VueChart.default)
</script>

Install via NPM

$ npm install vue-chart-js --save

Register as Component

import Vue from 'vue'
import VueChart from 'vue-chart-js'

export default {
  name: 'App',

  components: {
    VueChart
  }
}

Register as Plugin

import Vue from 'vue'
import VueChart from 'vue-chart-js'

Vue.use(VueChart)

Usage

<template>
  <vue-chart type="bar" :data="chartData"></vue-chart>
</template>

<script>
import VueChart from 'vue-chart-js'

export default {
  name: 'App',

  components: {
    VueChart
  },

  data: () => ({
    chartData: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [
            {
                label: 'Component 1',
                data: [10, 20, 30]
            },
            {
                label: 'Component 2',
                data: [20, 30, 40]
            }
        ]
    }
  }),
}
</script>

Props

Props	Description	Type	Required
type	Chart.js type	String	true
data	Chart.js datasets	Object	true
options	Chart.js options	Object	false
width	Chart width	Number	false
height	Chart height	Number	false

License

Vue-Chart-Js is open-sourced software licensed under the MIT license