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>
<div id="chart2" class="plot0" style="width:250px;height:170px;"></div>
JavaScript
$(document).ready(function(){
var data = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
var colors = [];
var threshold = 5;
$.each(data, function(index, value){
if(value[1] > threshold)
colors.push("#FF0000");
else
colors.push("#0000FF");
});
plot = $.jqplot('chart2', [data], {
title:'Bar Chart with Varying Colors',
seriesColors: colors,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});