JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<link rel="stylesheet" href="http://www.flotcharts.org/flot/examples/examples.css">
<script src="https://raw.github.com/krzysu/flot.tooltip/master/js/jquery.flot.tooltip.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.categories.js"></script>
  <div id="placeholder" class="demo-placeholder" style="height:160px"></div>

JavaScript

var $border_color = "#efefef";
  var $grid_color = "#ddd";
  var $default_black = "#666";
  var $default_grey = "#ccc";
  var $primary_color = "#428bca";
  var $go_green = "#93caa3";
  var $jet_blue = "#70aacf";
  var $lemon_yellow = "#ffe38a";
  var $nagpur_orange = "#fc965f";
  var $ruby_red = "#fa9c9b";

function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + x; 
}

$(function() {

		var data = [["Aug 06",0.5],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
 var options = {

      series: {
        lines: { show: true,
          lineWidth: 1,
          fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
        },
        points: { show: true, 
          lineWidth: 2 
        },
        shadowSize: 0
      },
      grid: { hoverable: true, 
        clickable: true, 
        tickColor: "#eeeeee",
        borderWidth: 0,
        hoverable : true,
        clickable : true
      },
      tooltip : true,
      tooltipOpts : {
        content : getTooltip,
		defaultTheme : false
      },
      colors: [$primary_color, $jet_blue, $lemon_yellow, $nagpur_orange, $ruby_red, $go_green, $default_black],
       xaxis: {
			mode: "categories",
			tickLength: 0 
		},
		yaxis: {
				  min: 0
				} ,
      selection: {
        mode: "x"
      }
    };
		$.plot("#placeholder", [ data ], options);

		// Add the Flot version string to the footer

		$("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
	});