[Solved]-How to line up x axis on stacked bar chart with a line overlay in d3.js-d3.js

you need to add on half the width of each bar to the x point of your line/dot calculation. as you've defined the width of each bar to be x.rangeband(), this would mean changing the x property to something like:

var valueline = d3.svg.line()
    .x(function(d) {
        return x(d.property) + x.rangeband() / 2;
    })
    .y(function(d) { return ycost(d.normalised_cost); })
    .interpolate("step-after");