I have a bar graph created using jqplot, featuring three values. I attempted to make the bar with the highest value reach the top of the chart, causing the heights of the other two bars to be recalculated accordingly. Below is the code I implemented:
var value1 = 119, value2 = 91, value3 = 12;
var s1 = [value1, value2, value3];
var ticks = ['a', 'b', 'c'];
plot7 = $.jqplot('chart7', [s1], {
seriesColors:['#74b6e7', '#003246', '#e22a20'],
gridPadding: {top:0, bottom:0, left:0, right:0},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadow: false,
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 51,
groups: 1,
varyBarColor: true
},
//pointLabels: { show: false }
},
series:[
{pointLabels:{
show: true,
labels:[ value1.toString(), value2.toString(), value3.toString()]
}}],
axes: {
// yaxis: { autoscale: true },
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
min: 0,
max: value1
}
}
});
The CSS styling applied:
.jqplot-grid-canvas, .jqplot-xaxis, .jqplot-yaxis{ display: none;}
.jqplot-point-label{ top: 129px!important; color: #fff;}
#chart7{ width: 152px; height: 152px;}
Here's how the graph appears after applying the settings:
I am currently struggling to determine why the first point label is not displaying on the initial bar in the graph. Can anyone shed light on what might be incorrect in my setup?