score:0

Accepted answer

What you're trying to do doesn't work because you're using the wrong scale/ticks with your second axis. The scale is ordinal, but the tick values are numeric, hence you're getting incorrect x positions.

It's much easier if you don't (ab)use an axis to do this. All you have to do is append text elements as follows.

svg.append("g").selectAll("text")
    .data(jsonDataResult).enter()
    .append("text")
    .attr("dx", "0.1em")
    .attr("dy", "-0.5em")
    .attr("x", function(d) { return x(d.Key); })
    .attr("y", function(d) { return y(d.Stack1 + d.Stack2 + d.Stack3); })
    .text(function(d) { return (d.Stack1 + d.Stack2 + d.Stack3); });

score:0

I modified the code a little so the lables are just above the stacked bar.

enter image description here

 svg.append("g").selectAll("text")
            .data(jsonDataResult).enter()
            .append("text")
            .attr("dx", "0.1em")
            .attr("dy", "-0.5em")
            .attr("x", function (d) { return x(d.Key); })
            .attr("y", function (d) {
                return (-((height / yStackMax) * (d.Stack1 + d.Stack2 + d.Stack3)))+height;
            })
            .text(function (d) { return (d.Stack1 + d.Stack2 + d.Stack3); });

Related Query

More Query from same tag