JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div id="areachartr" style="height: 250px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

CSS

.morris-hover.morris-default-style {
    border-radius:2px;
}

.morris-hover {
    animation: fade 500ms ease-in;
}

@keyframes fade {
    0% {
        opacity: 0;
        }
    100% {
        opacity: 1;
        }
}

JavaScript

Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'areachartr',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 25, value2: 10},
    { year: '2009', value: 20, value2: 15},
    { year: '2010', value: 25, value2: 20 },
    { year: '2011', value: 5, value2: 15 },
    { year: '2012', value: 20, value2: 10 }
  ],
  fillOpacity: 0.5,
  pointFillColors: ['lightgrey', 'lightgreen'],
  pointStrokeColors: ['grey', 'lime'],
  lineColors: ['grey', 'green'],
  lineWidth: 5,
  hideHover: true,
  behaveLikeLine: true,
  resize: true,
  grid: false,
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value', 'value2'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value', 'Value2'],
  crossHair: true,
});