nvd3 orientation axis on area chart

Question

While creating an nvd3 area chart, there are ways to change the orientation of the axis, meaning starting from top to bottom, this works fine with non area charts, when I try to do so with area series, the datapoints are well located, the issue is that the rendered area still remains on the same direction, I mean, from bottom to top.

Is there a way to fix this issue?

I'm using angular-nvd3 with the following options on nvd3 initialization:

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {

    $scope.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            yDomain: [100, 0],
            x: function(d){ return d.x; },
            y: function(d){ return d.y; },
         }
    };

    $scope.data = [{
         "area": true,
         "values": [
             {
                 "x": 1,
                 "y": 50
             },
             {
                 "x": 2,
                 "y": 55
             },
             {
                 "x": 3,
                 "y": 60
             },
             {
                 "x": 4,
                 "y": 70
             }
          ]
    }];

});

Here a plunker to show the issue.

https://plnkr.co/edit/pXeFbe0w4BK6eGcfyXZ4?p=preview

Answer 1

Using orient method allows you to place the axis wherever you want (left, right, top, bottom), but is not meant to change the way the axis is plotted, is only changing the position not orientation.

For example, from 100 to 0 instead of 0 to 100. I ended up with a css approach to make a mirror effect and get what I wanted:

.chart {
    transform: rotate(180deg) scaleX(-1); 
}

This will turn the chart and make it look as desired, since plotting is working on the opposite side as I originally wanted to achieve.