I'm trying to create a bar chart in dc.js with the totals label at the end of the charts. Right now, I can't find any documentation on parameters or functions to pass through that'll allow it to happen.
Any help would be greatly appreciated!
Asked
Active
Viewed 520 times
0
-
Do you have some source that you can put up? – Jon Jun 23 '15 at 16:24
-
possible duplicate of [Show values on top of bars in a barChart](http://stackoverflow.com/questions/25026010/show-values-on-top-of-bars-in-a-barchart) – Gordon Jun 23 '15 at 16:45
-
it's not directly supported, but the linked question and answer show how to add it post-hoc. please comment there if you can't get it to work. – Gordon Jun 23 '15 at 16:46
1 Answers
1
Gordon, you are correct that this is a duplicate of a problem that you mentioned in a comment!
However, I found the answer didn't work because .renderlet chaining was removed. Here's a reworked version of it that worked for me (kinda, there is still issue of it's not showing up if the bars are too small).
Thanks for everything!
testChart
.width(400)
.height(200)
.dimension(testDim)
.group(testGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
testChart.on('renderlet', function (chart) {
var barsData = [];
var bars = chart.selectAll('.bar').each(function (d) {
barsData.push(d);
});
//Remove old values (if found)
d3.select(bars[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 = bars[0].length - 1; i >= 0; i--) {
var b = bars[0][i];
//Only create label if bar height is tall enough
if (+b.getAttribute('height') < 10) continue;
gLabels.append("text")
.text(barsData[i].data.value)
.attr('x', +b.getAttribute('x') + (b.getAttribute('width') / 2))
.attr('y', +b.getAttribute('y') + 25)
.attr('text-anchor', 'middle')
.attr('fill', 'black');
}
});
