JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://splink.packimpex.ch/js/flot/jquery.flot.js"></script>
<script src="http://splink.packimpex.ch/js/flot/jquery.flot.categories.js"></script>
<script src="http://splink.packimpex.ch/js/flot/jquery.flot.resize.js"></script>
<body>
<div class="chart-container"> <b>Impressed</b><br />
	<div id="placeholder1" class="chart-placeholder"></div>
	<br />
	<b>Happy</b><br />
	<div id="placeholder2" class="chart-placeholder"></div>
	<br />
	<b>Returned</b><br />
	<div id="placeholder3" class="chart-placeholder"></div>
</div>
</body>

CSS

html, body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
}
.chart-container {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 15px 15px 15px;
	margin: 15px auto 30px auto;
	border: 1px solid #ddd;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.chart-placeholder {
	width: 100%;
	height: 90px;
	font-size: 14px;
	line-height: 1em;
}
.legend table {
	border-spacing: 5px;
}
.myCSSClass {
	font-size: 9px;
	color: #AD8200;
	padding: 2px;
	opacity: 0.80;
}

JavaScript

$(function() {
	$.plot("#placeholder1", [{
		data: [
			[70, "Target: 70%"]
		],
		color: "#0C4BBB",
		bars: {
			show: true,
			barWidth: 0.7,
			fill: 1,
			lineWidth: 0,
			horizontal: true
		}
	},{
		data: [
			[63.37 , '2013: 63.4%']
		],
		color: "#BB250C",
		bars: {
			fill: 0.6,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	},{
		data: [
			[66.65 , '2014: 66.7%'],
		],
		color: "#BB250C",
		bars: {
			fill: 0.8,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	},{
		data: [
			[83.33 , "This Week : 83.3%"],
		],
		color: "#A2BB0C",
		bars: {
			fill: 1,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	}], {
		xaxis: {
			min: 0,
			max: 100,
			tickLength:0,
			show: false
		},
		yaxis: {
			mode: "categories",
			tickLength: 0,
			labelWidth: 100,
			labelHeight: 11,
			font: {
				size: 10,
				lineHeight: 0,
				weight: "bold",
				family: "sans-serif",
				color: "#000000",
			}
		},
		grid: {
			markings: [ { xaxis: { from: 70, to: 70}, color: "#EFEFEF" } ],
			borderWidth: 1,
			borderColor: '#FFF'
		}
	});
	$.plot("#placeholder2", [{
		data: [
			[97, "Target: 97%"]
		],
		color: "#0C4BBB",
		bars: {
			show: true,
			barWidth: 0.7,
			fill: 1,
			lineWidth: 0,
			horizontal: true
		}
	},{
		data: [
			[92.21 , '2013: 92.2%']
		],
		color: "#BB250C",
		bars: {
			fill: 0.6,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	},{
		data: [
			[95.84 , '2014: 95.8%'],
		],
		color: "#BB250C",
		bars: {
			fill: 0.8,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	},{
		data: [
			[99.98 , "This Week : 100%"],
		],
		color: "#A2BB0C",
		bars: {
			fill: 1,
			lineWidth: 0,
			show: true,
			barWidth: 0.7,
			horizontal: true
		}
	}], {
		xaxis: {
			min: 0,
			max: 100,
			tickLength:0,
			show: false
		},
		yaxis: {
			mode: "categories",
			tickLength: 0,
			labelWidth: 100,
			font: {
				size: 10,
				lineHeight:...