CODEWITHSUNDEEP
chartsd3.jsareastacked
AnthonyDeaver
AnthonyDeaver

Reputation: 151

D3.js AreaChart alignment issues

I'm in need of a little assistance. I have a stacked area chart in d3.js using ordinal for the x axis (and likely for the y as well but haven't implemented that yet) and while it's rendering, it's not quite right. I need to figure out how to shift the chart (not the axis) so that the left most border is lined up vertically with the first tickmark and the rightmost is even with the last tickmark.

I've tried several variations and can't seem to figure out the starting x value.

Any help would be appreciated.

My x code

var x = d3.scale.ordinal().rangeRoundBands([0, width]);
x.domain(['Dec','Jan','Feb']); // Hard coded for now

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

A js fiddle of the entire chart (with data): http://jsfiddle.net/adeaver/FRNbq/6/

Upvotes: 1

Views: 336

Answers (2)

scuerda
scuerda

Reputation: 525

This also works:

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 1, 0);

Upvotes: 0

Superboggly
Superboggly

Reputation: 5834

Have you tried:

var x = d3.scale.ordinal()
    .rangePoints([0, width]);

That may be what you are looking for.

Upvotes: 1

Related Questions