CODEWITHSUNDEEP
javascriptd3.js
Phil Gyford
Phil Gyford

Reputation: 14674

d3 bar chart is upside down

I have a simple bar chart drawn in d3, with vertical bars: http://jsfiddle.net/philgyford/LjxaV/2/

However, it's drawing the bars down, with the baseline at the top of the chart.

I've read that to invert this, drawing up from the bottom, I should change the range() on the y-axis. So, change this:

    .range([0, chart.style('height')]);

to this:

    .range([chart.style('height'), 0]);

However, that looks like it's drawing the inverse of the chart - drawing in the space above each of the bars, and leaving the bars themselves (drawn from the bottom) transparent. What am I doing wrong?

Upvotes: 11

Views: 14605

Answers (3)

Jared Wilber
Jared Wilber

Reputation: 6815

The x and y coordinates for svg start in the top left. You want the y to start on the bottom. The code below assumes you're appending to some function along the lines of:

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')

To make the bar plot act as you desire, set the y attribute to begin at distance data[i] above the axis:

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

Then, you must make the distance extend the remaining data[i] to the axis. 

.attr('height', function(d) { return d; })

And that's it!

Upvotes: 2

cmonkey
cmonkey

Reputation: 4296

Per the d3 basic bar chart : http://bl.ocks.org/mbostock/3885304

You are correct in inverting the range.

Additionally, your rectangles should be added like this:

    .attr('y', function(d) { return y(d.percent); } )
    .attr('height', function(d,i){ return height - y(d.percent); });

Upvotes: 15

mike j m
mike j m

Reputation: 19

Setting the y attribute seems to work:

.attr('y', function(d){ return (height - parseInt(y(d.percent))); })

jsfiddle here

Upvotes: 1

Related Questions