Skip to content
VueJS component wrapping Morris.js
JavaScript Vue
Branch: master
Clone or download
Latest commit a03d8bc Sep 19, 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 Fix version about css-loader (assume vulnerability about a dev dep) Sep 19, 2019
img Update doc Jan 8, 2017
src Fix issue #22: x-label-angle with bar chart Aug 19, 2019
.babelrc
.gitignore Fix: dynamic chart => take into account other options Nov 12, 2017
LICENSE Initial commit Jan 6, 2017
README.md Fix version about css-loader (assume vulnerability about a dev dep) Sep 19, 2019
package-lock.json 1.1.0 Sep 19, 2019
package.json 1.1.0 Sep 19, 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 in your package.json and, 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
You can’t perform that action at this time.