CODEWITHSUNDEEP
javascriptangulard3.jsnvd3.jsangular-nvd3
Manuel Rodriguez
Manuel Rodriguez

Reputation: 21

nvd3 orientation axis on area chart

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

Upvotes: 2

Views: 304

Answers (2)

Manuel Rodriguez
Manuel Rodriguez

Reputation: 21

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.

Upvotes: 0

shabeer90
shabeer90

Reputation: 5151

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 :

  1. chart.rightAlignYAxis(true) or

  2. 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

Upvotes: 0

Related Questions