Morris - Good-looking Charts Plugin With jQuery

File Size: 135 KB
Views Total: 57159
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Morris - Good-looking Charts Plugin With jQuery

Morris is a pretty and powerful Charts Plugin with jQuery and Raphaël JS Library to make drawing simple charts easy. With Morris.js, you can create a wide variety of charts like line & area charts, bar charts and donut charts to fit you needs. It also works fine on mobile device such as iOS and android. More examples can be found in examples fold.

Basic Usage:

1. Include  jQuery, Raphaël JS Library and Morris.js in the header

<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="morris.js"></script>

2. Include required CSS file to style your charts

<link rel="stylesheet" href="morris.css">

3. Create a container for your charts

<div id="graph"></div>

4. The javascript to create a new area chart.

  element: 'graph',
  data: [
    {x: '2011 Q1', y: 3, z: 3},
    {x: '2011 Q2', y: 2, z: 0},
    {x: '2011 Q3', y: 2, z: 5},
    {x: '2011 Q4', y: 4, z: 4}
  xkey: 'x',
  ykeys: ['y', 'z'],
  labels: ['Y', 'Z']
}).on('click', function(i, row){
  console.log(i, row);

5. More chart types.

// bar chart

// donut chart

// line chart

6. All default options to customize the charts.

// line chart
  lineWidth: 3,
  pointSize: 4,
  lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
  pointStrokeWidths: [1],
  pointStrokeColors: ['#ffffff'],
  pointFillColors: [],
  smooth: true,
  shown: true,
  xLabels: 'auto',
  xLabelFormat: null,
  xLabelMargin: 24,
  hideHover: false,
  trendLine: false,
  trendLineWidth: 2,
  trendLineColors: ['#689bc3', '#a2b3bf', '#64b764']

// line chart
  fillOpacity: 'auto',
  behaveLikeLine: false

// Bar chart
  barSizeRatio: 0.75,
  barGap: 3,
  barColors: ['#0b62a4', '#7a92a3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
  barOpacity: 1.0,
  barRadius: [0, 0, 0, 0],
  xLabelMargin: 50,
  horizontal: false,
  shown: true

// Donut chart
  colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
  backgroundColor: '#FFFFFF',
  labelColor: '#000000',
  formatter: Morris.commas,
  resize: false

More examples:

Change log:

v0.5.1 (2016-07-07)

v0.4.3 (2013-05-26)

  • Fix flickering hover box 
  • xLabelAngle option (diagonal labels!!)
  • Fix area chart fill bug 
  • Make event handlers chainable
  • gridTextFamily and gridTextWeight options
  • Fix hovers with setData
  • Fix hideHover behaviour 

This awesome jQuery plugin is developed by oesmith. For more Advanced Usages, please check the demo page or visit the official website.