VueJS component wrapping Morris.js
JavaScript Vue
Switch branches/tags
Nothing to show
Latest commit cd4a39d May 24, 2017 @bbonnin 0.0.8
Permalink
Failed to load latest commit information.
build Add missing options (area, line charts) Jan 12, 2017
dist use standard closure format May 24, 2017
examples Add hideHover options to line/area charts Apr 11, 2017
img Update doc Jan 8, 2017
src use standard closure format May 24, 2017
.babelrc Initial commit Jan 6, 2017
.gitignore Initial commit Jan 6, 2017
LICENSE Initial commit Jan 6, 2017
README.md Update README.md May 19, 2017
package.json 0.0.8 May 24, 2017

README.md

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. For example, if you are using Webpack, you should have something like that in your 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 directory or the project: https://github.com/bbonnin/vue-morris-example.

  • 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>
  • Bar chart bar chart

  • Line chart line chart

  • Area chart area chart

  • Donut 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