Vue Morris

VueJS component wrapping Morris.js

Install

Use npm

npm install vue-morris --save

Examples

Import the component

// Do not forget to import raphael
import Raphael from 'raphael/raphael'
global.Raphael = Raphael

import Vue from 'vue'
import { DonutChart } from 'vue-morris'

new Vue({
  el: '#app',

  data: {
    donutData: [
      { label: 'Red', value: 300 },
      { label: 'Blue', value: 50 },
      { label: 'Yellow', value: 100 }
    ],

    components: {
    DonutChart, BarChart, LineChart, AreaChart
  }
})

Use the component in html

<donut-chart
                                    id="donut"
                                    :data="donutData"
                                    colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]'
                                    resize="true">
</donut-chart>