JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.canvasAxisLabelRenderer.js "></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js "></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<div id="chartdiv"></div>
JavaScript
var ticks =['Jan 14', 'Feb 14', 'Mar 14', 'Apr 14', 'May 14', 'Jun 14', 'Jul 14', 'Aug 14', "Sep 14", 'Oct 14', 'Nov 14', 'Dec 14'];
var s1 = [73, 112, 307, 849, 1591, 1016, 647, 445, 60, 30, 10, 1];
var s2 = [4338, 5114, 3484, 2282, 89, 35, 8, 3, 2, 1, 1, 0];
plot3 = $.jqplot('chartdiv', [s1, s2], {
// Tell the plot to stack the bars.
seriesColors: [ "rgb(255, 78, 80) ", "rgb(29, 171, 54)"],
animate: !$.jqplot.use_excanvas,
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
highlightMouseDown: true
},
pointLabels:{ show:true, stackedValue: false }
},
series:[
{label:'Inflight', pointLabels: {ypadding: 2}},
{label:'Completed', pointLabels: {ypadding: 15}}
],
axes: {
xaxis: {
ticks: ticks,
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'n'/*,
placement: 'outside'*/
}
});
console.log(plot3);