Make Cool Charts With Vue Js Component Wrapping Morris.js

Bruno Bonnin comes up with a Vue js wrapper component based on Morris.js. Morris.js is a very simple API for drawing lines, bars, area, and donut charts.

Installation

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'
    }
  },

Usage Example

For a complete example, see files in the examples directory or the project: https://github.com/bbonnin/vue-morris-example.

First, you’ve to 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
  }
})

Next, Use the component in HTML.

<donut-chart 
  id="donut" 
  :data="donutData" 
  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  resize="true">
</donut-chart>

Chart Examples

• Bar chart
• Line chart
• Area chart
• Donut chart

For more details, you can visit the website here.

Github link