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

Support

Hello, I'm Kevin the maintainer of this project in my free time (which is getting lessen these days), if this project does help you in any way please consider to support me. Thanks :smiley:

• One-time donation via Paypal