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.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>
<script src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.trendline.js"></script>
<div id="chart2" class="plot0" style="width:500px;height:250px;"></div>
JavaScript
var AppleArray=[1047,1049,1045,1046,1045,1046,
1077,1048,1045,1046,1047,1045];
var OrangeArray = [669,717,742,696,1277,905,
728,740,704,722,753,2127];
var GrapeArray = [1102,1079,1105,1070,1120,1095,
1085,1077,1088,1139,1953,1452];
var MangoArray =[1583,1649,1596,1587,1523,1539,
2025,1653,1581,1797,2039,2012];
var PomegranateArray = [1240,1219,1235,1203,1147,1289,
1105,1194,1117,1209,1152,1208];
var xAxisTicks =['00:01:03','02:01:03','04:01:04','06:01:04',
'08:01:04','10:01:03','12:01:03','14:01:03',
'16:01:06','18:01:04','20:01:05','22:01:08'];
var TypeArray = [AppleArray, OrangeArray, GrapeArray, MangoArray, PomegranateArray];
plot1 = $.jqplot('chart2', TypeArray, {
animate: !$.jqplot.use_excanvas,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true },
trendline: {show: true},
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
//labels: legendLabels,
show: true
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
seriesToggleReplot: { resetAxes: true },
drawBaseline: false
},
ticks: xAxisTicks
},
yaxis: {
//min : 500,
min: 100,
//tickInterval : 500,
max: 2500
}
},
highlighter: { show: false }
});