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.
<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*'],
marginInnerTop: 20,
marginInnerBottom: 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>