vue-chart-js

vue-chart-js

Chart.js for Vue.

Installation

$ npm install vue-chart-js --save

Install as Component

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

export default {
  name: 'App',

  components: {
    VueChart
  }
}

Install as Plugin

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

Vue.use(VueChart)

Install via CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-chart-js"></script>

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

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