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.

Morris.Area({
  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
Morris.Bar(options)

// donut chart
Morris.Donut(options)

// line chart
Morris.Line(options)

6. All default options to customize the charts.

// line chart
Morris.Line({
  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
Morris.Area({
  fillOpacity: 'auto',
  behaveLikeLine: false
})

// Bar chart
Morris.Area({
  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
Morris.Donut({
  colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
  backgroundColor: '#FFFFFF',
  labelColor: '#000000',
  formatter: Morris.commas,
  resize: false
})

More examples:

• Area chart example
• Bar chart example
• Donut Chart example
• Line charts example

Change log:

v0.5.1 (2016-07-07)

• Update

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.