A Horizontal Bar chart showing custom ingraph labels (canvas version)

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.

[No canvas support]

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>