JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<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>
<style>
    #legend {
        height: 50px;
    // background: rgba(127, 127, 127, 0.5)
    }
    #legend span {
        display: inline-block;
        padding: 15px 30px;
        position: relative;
    }
    #legend span:after {
       padding-left: 4px;
    //  content: '\22C5';
    //text-decoration: line-through;
    }
</style>
<body>
  <div id="legend"></div>
  <div id="area-example"></div>
    
</body>

JavaScript

/*
 * Play with this code and it'll update in the panel opposite.
 *
 * Why not try some of the options above?
 */
var chart = Morris.Line({
  element: 'area-example',
  lineColors: ['red', 'green'],
  data: [
      { y: '2006', a: 100, b: 20 },
      { y: '2007', a: 75, b: 30 },
      { y: '2008', a: 50, b: 40 },
      { y: '2009', a: 75, b: 50 },
      { y: '2010', a: 50, b: 60 },
      { y: '2011', a: 75, b: 70 },
      { y: '2012', a: 100, b: 80 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  continuousLine: false
});

chart.options.labels.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label).css('color', chart.options.lineColors[i])
    $('#legend').append(legendItem)
})