Dimple Stacked Bar Chart - adding label for aggregate total - dimple.js

Question

I'm trying to add a label to the aggregate total for a stacked bar chart above each bar. I used this example (http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bar_labels) to add the totals for each section of the bar, but I'm not sure how to add the total above. I've also been able to add total labels above each bar for a single series (not stacked). I just can't get it to work with a stacked bar chart.
My current workaround is plotting an additional null series line, but making the line and markers transparent so you can still see the total value in the tooltip. However, I'd really like to just have the totals displayed above each bar.
Here's the code:
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(80, 30, 510, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule(Date);
var y = myChart.addMeasureAxis("y", "Calls");
y.showGridlines = true;
y.tickFormat = ',6g';
y.overrideMin = 0;
y.overrideMax = 800000;
var s = myChart.addSeries("Metric", dimple.plot.bar);
s.afterDraw = function (shape, data) {
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
if (rect.height >= 1) {
svg.append("text")
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
.style("text-anchor", "middle")
.style("font-size", "9px")
.style("font-family", "sans-serif")
.style("opacity", 0.8)
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
};
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
Here is the JSFiddle: http://jsfiddle.net/timothymartin76/fusaqyhk/16/
I appreciate any assistance on this.
Thanks!

Answer 1

You can add them after drawing by calculating the bar totals and deriving the y position from that:
// Iterate every value on the x axis
x.shapes.selectAll("text").each(function (d) {
// There is a dummy empty string value on the end which we want to ignore
if (d && d.length) {
// Get the total y value
var total = d3.sum(data, function (t) { return (t.Month === d ? t.Calls : 0); });
// Add the text for the label
var label = svg.append("text");
// Set the x position
// x._scale(d) is the tick position of each element
// (myChart._widthPixels() / x._max) / 2 is half of the space allocated to each element
label.attr("x", x._scale(d) + (myChart._widthPixels() / x._max) / 2)
// Vertically center the text on the point
label.attr("dy", "0.35em")
// Style the text - this can be better done with label.attr("class", "my-label-class")
label.style("text-anchor", "middle")
.style("font-size", "9px")
.style("font-family", "sans-serif")
.style("opacity", 0.8)
// Set the text itself in thousands
label.text(d3.format(",.1f")(total / 1000) + "k");
// Once the style and the text is set we can set the y position
// y._scale(total) gives the y position of the total (and therefore the top of the top segment)
// label.node().getBBox().height gives the height of the text to leave a gap above the bar
label.attr("y", y._scale(total) - label.node().getBBox().height)
}
});
Here is your updated fiddle: http://jsfiddle.net/fusaqyhk/17/