Node People Magic

    vue-chart-js

    1.4.1 • Public • Published

    vue-chart-js

    npm npm npm npm

    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

    Install

    npm i vue-chart-js

    DownloadsWeekly Downloads

    394

    Version

    1.4.1

    License

    MIT

    Last publish

    Collaborators

    • kevinongko