Accepted answer

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( + x.rangeBand() / 2;
    .y(function(d) { return yCost(d.normalised_cost); })

Related Query