I have this below code for the bar chart using the dc.js
.
barChart = dc.barChart('.bar-chart-container')
barDimension = ndx.dimension(function(d) { return d.bar; })
barGroup = barDimension.group().reduceSum(function(d) { return d.count; });
barChart
.margins({ top: 10, left: 50, right: 10, bottom: 150 })
.width(1200)
.height(500)
.dimension(barDimension)
.group(barGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.gap(5)
.elasticY(true)
.renderlet(function (chart) {chart.selectAll("g.x text").attr('dx', '-35').attr(
'dy', '15').attr('transform', "rotate(-45)").attr("text-anchor", "end");})
.renderlet(function(chart) {
chart.selectAll("rect")
.append("text")
.attr("text", function(d) { return d.value })
})
I wanted to add the data labels to the bars.
But unfortunately that is not avaiable in the dc.js.
I tired adding new element using the .renderLet
and I was successful in it.
But I don't have any idea how to put the exact number on the selection.
Whereas the for rowChart
and pieChart
we can use the label function to add the data labels using d.value
which is not available for the bar chart.
Is there any way we can add the data labels on top of all the bars in dc.js
.
Thanks in advance.