This Bar chart uses the custom RGraph ondraw event to add highlight to each bar.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var bar7 = new RGraph.Bar({
id: 'cvs',
data: [[47,75],[32,74],[71,85],[25,19],[23,71],[81,59],[43,130],[23,20]],
options: { textSize: 14,
gutterLeft: 45,
colors: ['#494949','#35A0DA'],
labels: ['Alf','Bert','Craig','Dan','Edgar','Fred','Gary','Harry'],
ylabelsCount: 3,
numyticks: 6,
backgroundGridAutofitNumhlines: 3,
backgroundGridVlines: false,
backgroundGridBorder: false,
hmargin: 5,
strokestyle: 'rgba(0,0,0,0)',
textAccessible: true,
shadow: true
}
}).on('draw', function (obj)
{
var len = obj.coords.length;
for (var i=0; i<len; ++i) {
var x = obj.coords[i][0];
var y = obj.coords[i][1];
var w = obj.coords[i][2] / 2;
var h = obj.coords[i][3];
obj.context.fillStyle = 'rgba(255,255,255,0.15)';
obj.context.fillRect(x,y,w,h)
}
}).draw();
};
</script>