A Bar chart using the labelsAbove option
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:
<div style="padding: 15px">
<canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
data = [
[4,8,6,3], [5,6,3,6],
[4,5,6,3], [1,5,9,6],
[5,8,4,2], [6,9,5,6],
[4,4,5,3]
];
labels = [
'Monday','Tuesday',
'Wednesday','Thursday',
'Friday','Saturday',
'Sunday'
];
labelsAbove = [];
// Create the labelsAbove
data.forEach(function (v, k, arr)
{
labelsAbove[k * 4] = '{1}kg'.format(RGraph.arraySum(v))
});
bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
textSize: 10,
marginTop: 35,
marginBottom: 70,
xaxisLabelsAngle: 45,
hmargin: 10,
xaxisLabelsOffsety: 10,
xaxisLabels: labels,
colors: ['#aaf', 'rgba(96,128,96,0.5)', '#faa','#afa'],
backgroundGridVlines: false,
backgroundGridBorder: false,
grouping: 'stacked',
colorsStroke: 'transparent',
shadow: false,
labelsAbove: true,
labelsAboveSize: 12,
labelsAboveSpecific: labelsAbove,
xaxis: false,
yaxis: false,
}
}).wave();
</script>