Home

Awesome

vue-chart

npm npm npm

A Powerful and Highspeed Chart Parser for Vue.

Example

DEMO | CODE

Installation

Browser globals

The dist folder contains vue-chart.js and vue-chart.min.js with the component exported in the window.VueChart object.

<body>
  <vue-chart type="line" :data="myData" :options="myOptions"></vue-chart>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-chart.js"></script>
<script>
    var vm = new Vue({
        el: "body",
         components: {
            VueChart
          }
    });
</script>

CommonJS

var VueChart = require('vue-chart');

new Vue({
  components: {
    'vue-chart': VueChart
  }
})

js

// <script src="dist/vue-chart.js"></script>

new Vue({
  components: {
    VueChart
  }
})

ES6

import VueChart from 'vue-chart'

new Vue({
  components: {
    VueChart
  }
})

Props

PropTypeDefault
typeStringtype="line"
dataObjectDOCS
optionsObjectDOCS

Todo

DonePropTypeRequiredDescription
NotypeStringnodefault is line
NodatasetsArray[object]yesChart.data.datasets
NolabelsArray[String]yesChart.data.labels
NoxLabelsArray[String]noChart.data.xLabels
NoyLabelsArray[String]noChart.data.yLabels
NocommonObjectnoCommon Chart Configuration
NotitleObjectnoTitle Configuration
NolegendObjectnoLegend Configuration
NotooltipObjectnoTooltip Configuration
NohoverObjectnoHover Configuration
NoanimationObjectnoAnimation Configuration
NoelementObjectnoElement Configuration

Thanks

License

Copyright (c) 2016 vue-chart by MIT