Skip to content
VueJS component wrapping Morris.js
Branch: master
Clone or download
Latest commit 56622c3 Jan 25, 2019
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 Update May 19, 2017
package-lock.json 1.0.1 Jan 25, 2019
package.json 1.0.1 Jan 25, 2019


Vue.js components wrapping Morris.js lib

See for documentation

Depends on Vue.js v2.1.0+


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'


For a complete example, see files in examples directory or the project:

  • 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
  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  • 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.