This is similar to a problem that I asked before. However instead of a bar chart, I'm trying to display the totals for a row chart.
I've tried to adjust the code accordingly, but my familiarity with JS is pretty low. Below is my attempt, any help would be greatly appreciated.
genderChart.on('renderlet', function (chart) {
var rowData = [];
var rows = chart.selectAll('.row').each(function (d) {
rowsData.push(d);
});
//Remove old values (if found)
d3.select(rows[0][0].parentNode).select('#inline-labels').remove();
//Create group for labels
var gLabels = d3.select(bars[0][0].parentNode).append('g').attr('id', 'inline-labels');
for (var i = rows[0].length - 1; i >= 0; i--) {
var b = rows[0][i];
gLabels.append("text")
.text(d3.format(",f")(rowsData[i].data.value))
.attr('x', +b.getAttribute('x') + (b.getAttribute('width') + 20)
.attr('y', +b.getAttribute('y'))
.attr('text-anchor', 'middle')
.attr('fill', 'black');
}
});
Right now there's no error in the console, so it's being render correctly...somwhere. So far the text does not show up anywhere near my row chart. Thanks!
As an alternative to your approach, you could try using
renderTitleLabel
.Something like this:
(This is available in the 2.0 betas, I am not sure about previous versions.)