Question

I’m trying to create a stacked bar chart with a line graph over the
top to show the relationship between total emissions and cost.

My example is here:

http://bl.ocks.org/4754261

As you can see from the chart, the dots of the line chart don’t line
up with the ticks on the bottom and thus don’t line up nicely with the
center of the bars.

I’ve been digging around quite a bit on google and I haven’t been able
to find something that helps me to solve my problem yet. Do I need a
second x axis and if so what would it look like?

Oh, and if this is a bad or misleading way to show the relationship
between cost and emissions, I’m receptive to other ideas.

Answer 1

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");