JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

<div>Morris.js Line Chart Example</div>
<div id="line-example"></div>

JavaScript

// Fetch the data
var data = [
    { y: '2006', a: 10000, b: 9000 },
    { y: '2007', a: 7500,  b: 6500 },
    { y: '2008', a: 5000,  b: 4000 },
    { y: '2009', a: 7500,  b: 6500 },
    { y: '2010', a: 5000,  b: 4000 },
    { y: '2011', a: 7500,  b: 6500 },
    { y: '2012', a: 10000, b: 9000 }
];

// Negate values
data = data.map(function(x){
  x.a = -x.a;
  x.b = -x.b;
  return x;
});

// Negate one more time in yLabels
var format = function(y) {
  return Morris.commas(-y);
}

Morris.Line({
  element: 'line-example',
  data: data,
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  yLabelFormat: format
});