Blog Detail


Make Cool Charts With Vue Js Component Wrapping Morris.js cover image

arrow_back 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.


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:

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.

  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 

Chart Examples

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

For more details, you can visit the website here.

Github link

Published at : 20-12-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project