D3 - stacked bar chart, starting from base

Question

I have a plunker here https://plnkr.co/edit/hBWoIIyzcHELGyewOyZE?p=preview

I'm using this as starting point to create a stacked bar chart https://bl.ocks.org/d3indepth/30a7091e97b03eeba2a6a3ca1067ca92

I need the chart to be vertical and to have axis

In my example I have the the chart vertical but I'm stuck getting it to start from the base and go upwards.

I know it's because the y attr but I'm stuck getting it to work.

.attr('y', function(d) {
    return d[0];
})

abigperson abigperson · Accepted Answer · 2018-01-07T19:53:47

try basing the y attribute as the difference between height and d[1]:

.attr('y', function(d) {
    return height - d[1];
})

your plunker works for me (i think as desired?) with this correction.

explanation: these coordinates are relative to point 0, 0 (upper left hand corner) so for the y-axis of a graph like this you always have to flip it around... you captured it correctly in your axis scales (e.g. for the x: [0, width] and y: [height, 0])

D3 - stacked bar chart, starting from base

1 Answers