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

I just updated the post with the snippet and plunker @jeznag — Manuel Rodriguez
Have you tried using a stacked area chart instead of a line chart? It seems to work properly if you use stackedAreaChart as the model. — jeznag
@jeznag the thing is that by the nature of my requirements I need to have multichart, since it can have line, area and even bar chart — Manuel Rodriguez
Ok have you tried using stackedArea inside multi chart? That should work fine. Maybe you could update the plnkr with a multi chart example that's not working. — jeznag

shabeer90 shabeer90 · Accepted Answer · 2017-05-15T16:23:58

According to the latest NVD3 version on Github here it allows you to change the orientation of the axis.

This is done using plan NVD3 and NOT ANGULAR NVD3, should be a similar way in angular.

To change xAxis try :

chart.xAxis.orient('top'); // Its 'bottom' by default

By default yAxis is set to left over here. You have 2 options to change the yAxis orientation :

chart.rightAlignYAxis(true) or
chart.yAxis.orient('right'); // Its 'left' by default

More information on Axis here

I have not tested this code, don't see why it wouldn't work.

Hope it helps

nvd3 orientation axis on area chart

2 Answers