Need help with vue-morris?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bbonnin
221 Stars 36 Forks MIT License 46 Commits 18 Opened issues

Description

VueJS component wrapping Morris.js

Services available

!
?

Need anything else?

Contributors list

# 122,479
vuejs
Shell
Scala
Jupyter...
40 commits
# 311,589
vuejs
PHP
Laravel
debuggi...
1 commit
# 214,801
Vue.js
vuejs
solidit...
2d-game
1 commit

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.