This is a stacked Bar chart. The labels that are inside the bars are achieved by using a DOM1 style ondraw event.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.key.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> canvas = document.getElementById("cvs"); bar = new RGraph.Bar({ id: 'cvs', data: [[5.33,2.33,3.32],[3.42,2.23,4.23],[4.23,3.23,4.99], [7.99,2.98,2.35], [2.75,1.02,5.24]], options: { grouping: 'stacked', xaxisLabels: ['John','James','Fred','Luke','Luis'], labelsAbove: true, labelsAboveDecimals: 2, linewidth: 2, colorsStroke: 'white', colors: ['Gradient(#4572A7:#66f)','Gradient(#AA4643:white)','Gradient(#89A54E:white)'], shadow: true, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 10, hmargin: 25, marginLeft: 45, backgroundGridVlines: false, backgroundGridBorder: false, key: ['Monday','Tuesday','Wednesday'], keyColors: ['blue','#c00','#0c0'], keyPosition: 'margin', keyPositionX: canvas.width - 300, keyPositionY: 18, keyPositionMarginBoxed: true, axesColor: '#ccc', yaxis: false } }).on('draw', function (obj) { for (var i=0; i<obj.coords.length; ++i) { obj.context.fillStyle = 'white'; var ret = RGraph.text2(obj.context, { font:'Verdana', size: 10, x: obj.coords[i][0] + (obj.coords[i][2] / 2), y: obj.coords[i][1] + (obj.coords[i][3] / 2), text: obj.data_arr[i].toString(), valign: 'center', halign: 'center' }); ret.node.style.textShadow = '-2px -2px 1px black, 2px 2px 1px black'; } }).draw(); </script>