VueJS component wrapping Morris.js
Clone or download
Latest commit ab14511 Jan 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Add missing options (area, line charts) Jan 12, 2017
dist Add labelFormat to bar chart Jan 2, 2019
examples Add labelFormat to bar chart Jan 2, 2019
img Update doc Jan 8, 2017
src Add labelFormat to bar chart Jan 2, 2019
.babelrc Initial commit Jan 6, 2017
.gitignore Fix: dynamic chart => take into account other options Nov 12, 2017
LICENSE Initial commit Jan 6, 2017
README.md Update README.md May 19, 2017
package-lock.json 1.0.0 Jan 2, 2019
package.json 1.0.0 Jan 2, 2019

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