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.meterGaugeRenderer.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.pieRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabel.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.cursor.js"></script>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.enhancedLegendRenderer.js"></script>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/examples/src/jquery.jqplot.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/examples/src/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/examples/src/plugins/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/examples/src/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="http://www.jqplot.com/examples/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jqplot.com/examples/src/jquery.jqplot.css" />
<link rel="stylesheet" type="text/css"...
JavaScript
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [7, 5, 3, 3];
var ticks = ['a', 'b', 'c', 'd'];
var mylabels = ["This", "particular", "way"]
plot2 = $.jqplot('chart2', [s1, s2, s3], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true,stackValue:true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'e',
placement: 'outside',
rendererOptions: {
numberRows: '1',
numberColumns: '3'
},
labels: mylabels
},
/* series: [
{showLabel: true},
{showLabel: false},
{showLabel: true}
]*/
});
});