Search code examples
javascriptd3.jssvgchartsarea

Vertical d3.svg.area?

I'm trying to make a vertical area chart, with a line in it's right borders. Line is being drawn perfectly ( top to bottom ), but the area is being drawn on right side of the path, it should be on the left.

I started with a horizontal chart, it worked then. See jsfiddle. I've also tried rotating the path but cannot get desired result.

var xScale = d3.scale.linear().range([0, sm_width]),
    yScale = d3.time.scale().range([0, sm_height]);

var area = d3.svg.area().x(function(d) {
    return xScale(xValue(d));
})
.y0(sm_height).y1(function(d) {
    return yScale(yValue(d));
});

var line = d3.svg.line().x(function(d) {
    return xScale(xValue(d));
})
.y(function(d) {
    return yScale(yValue(d));
});
Solution

  • Solution was to rotate the chart itself as Cool Blue mentioned in the comment.