vue-morris

Vue.js components wrapping Morris.js lib

See http://morrisjs.github.io/morris.js/ for documentation

Depends on Vue.js v2.1.0+

Install

Use npm

npm install vue-morris --save

Do not forget to declare jQuery in your

package.json

webpack.config.js

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'jquery': 'jquery/src/jquery.js'
    }
  },

Examples

For a complete example, see files in

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

  html
  
  
  

• Bar chart

• Line chart

• Area chart

• Donut chart

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build