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, Apr 17 '17 at 23:24
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, Apr 18 '17 at 01:25
@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, Apr 18 '17 at 17:44
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, Apr 18 '17 at 23:13

score 0 · Answer 1 · answered May 15 '17 at 16:23

0

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

answered May 15 '17 at 16:23

shabeer90

5,161
4
47
65

You are right, this allows you to place the axis wherever you want, 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 translate to make a mirror effect and get what I wanted. – Manuel Rodriguez Jul 26 '17 at 20:20
@ManuelRodriguez post your answer here and make sure to accept it. I'm sure others might find your solution useful. – shabeer90 Jul 27 '17 at 08:01

score 0 · Accepted Answer · answered Jul 28 '17 at 20:37

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.

nvd3 orientation axis on area chart

2 Answers2