An SVG Horizontal Bar chart showing custom ingraph labels

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. There's also a canvas version of this chart available.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.key.js"></script>
<script src="RGraph.svg.hbar.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
    <div style="width: 950px; height: 500px" id="chart-container"></div>
</div>
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]
    ];
    
    units = '%';

    hbar = new RGraph.SVG.HBar({
        id: 'chart-container',
        data: data,
        options: {
            key: ['1*','2*','3*','4*','5*','6*','7*'],
            vmarginTop: 20,
            vmarginBottom: 20,
            grouping: 'stacked',
            xaxis: false,
            yaxisLabels: ['A', 'B', 'C'],
            yaxisTickmarks: false,
            xaxisScaleUnitsPost: units,
            xaxisLabelsCount: 4,
            backgroundGridBorder: false,
            backgroundGridVlinesCount: 4,
            backgroundGridHlines: false,
            colors: ['#c00','#E06666','#F4B400','#E5E5E5','#71DCD8','#00B1AA','#00817C']
        }
    }).draw();
    
    // Add the ingraph labels
    for (var i=0; i<data.length; ++i) {
        data[i].forEach(function (v, k, arr)
        {
            if (!RGraph.SVG.isNull(v)) {
                var coords = hbar.coords2[i][k];
                
                RGraph.SVG.text({
                    object: hbar,
                    x: coords.x + coords.width - 3,
                    y: coords.y + (coords.height / 2),
                    valign: 'center',
                    halign: 'right',
                    text: data[i][k] + units,
                    size: 12,
                    bold: true,
                    background: 'rgba(255,255,255,0.75)',
                    padding: 2
                });
            }
        });
    }
</script>