This is a canvas version of the SVG demo which shows the same chart. This chart shows how you can use a little bit of extra coding in order to add your own, custom ingraph labels. Normally the labelsAbove option on a stacked chart will show a single summation of the values for each bar. This on the other hand shows a label for each bar. Some of the values in the data are null for which no label is shown.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.hbar.js"></script>Put this where you want the chart to show up:
<canvas width="950" height="500" id="cvs"></canvas>This is the code that generates the chart:
<script> data = [ [null,null,null,5,18,36,41], [5,null,9,14,23,41,8], [null,null,5,27,23,32,13] ]; hbar = new RGraph.HBar({ id: 'cvs', data: data, options: { key: ['1*','2*','3*','4*','5*','6*','7*'], vmargin: 10, grouping: 'stacked', xaxis: false, yaxisLabels: ['A', 'B', 'C'], xaxisScaleUnitsPost: '%', xaxisLabelsCount: 4, backgroundGridVlinesCount: 4, backgroundGridHlines: false, backgroundGridBorder: false, colors: ['#c00','#E06666','#F4B400','#E5E5E5','#71DCD8','#00B1AA','#00817C'], keyPosition: 'margin', keyTextSize: 18, textAccessible: false } }).draw(); // Add the ingraph labels for (var i=0; i<data.length; ++i) { data[i].forEach(function (v, k, arr) { if (!RGraph.isNull(v)) { var coords = hbar.coords2[i][k]; RGraph.text2(hbar, { x: coords[0] + (coords[2] / 2), y: coords[1] + (coords[3] / 2), valign: 'center', halign: 'center', text: data[i][k] + '%', size: 12, bold: true, bounding: true, boundingFill: 'rgba(255,255,255,0.75)', boundingStroke: 'rgba(0,0,0,0)' }); } }); } </script>