How to know min max value of a chart axis in nvd3 chart

Question

I am using angular nvd3 chart and want to retrieve the x-axis min and max value so that when I click a custom next button the new x-axis value will be loaded and chart will show the next range of values...

I am stuck here as I can't find a way to get the min max value of the current x-axis

Here is my code...

angular.module('sbAdminApp', ['nvd3'])
.controller('DemoCtrl', ['$rootScope', '$scope', '$timeout', function 
($rootScope, $scope, $timeout){
$rootScope.curlabel = "year";
$scope.curformat = "mon"
$scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            staggerLabels: false,
            x: function(d){return d.label;},
            y: function(d){return d.value;},
            showValues: true,
            valueFormat: function(d){ return d3.format(',.4f')(d); },
            dispatch: {
              tooltipShow: function(e){ console.log('! tooltip SHOW !')},
              tooltipHide: function(e){console.log('! tooltip HIDE !')},
              beforeUpdate: function(e){ console.log('! before UPDATE !')}
            },
            discretebar: {
              dispatch: {
                //chartClick: function(e) {console.log("! chart Click !")},
                elementClick: function(d) {
                    //console.log(d);
                    var labelValue = d.data.label;
                    $scope.newchart($rootScope.curlabel, labelValue);

                    }

              }
            },
            zoom: {
                enabled: true,
                scaleExtent: [1, 10],
                useFixedDomain: false,
                useNiceScale: false,
                horizontalOff: false,
                verticalOff: true,
                unzoomEventType: 'dblclick.zoom'
            }

        }
    };

$scope.data = [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label" : 2010 ,
                        "value" : -29.765957771107
                    } ,
                    {
                        "label" : 2011 ,
                        "value" : 0
                    } ,
                    {
                        "label" : 2012 ,
                        "value" : 32.807804682612
                    } ,
                    {
                        "label" : 2013 ,
                        "value" : 196.45946739256
                    } ,
                    {
                        "label" : 2014 ,
                        "value" : 0.19434030906893
                    } ,
                    {
                        "label" : 2015,
                        "value" : -98.079782601442
                    } ,
                    {
                        "label" : 2016 ,
                        "value" : -13.925743130903
                    } ,
                    {
                        "label" : 2017 ,
                        "value" : -5.1387322875705
                    },
                    {
                        "label" : 2018 ,
                        "value" : -5.1387322875705
                    },
                    {
                        "label" : 2019 ,
                        "value" : -5.1387322875705
                    }
                ]
            }
        ];

Thanks in Advance

Where are your data ? Can you not simply get the min and max of your data array ? — Weedoze
data will be a series of years as x-axis and and some values as y axis, but I can't show the whole data at once in the graph So I will load limited data at once and then the rest of the data on next button — Shalini Sengar
My data is something like this: $scope.data = [{ key: "Cumulative Return", values: [{ "label" : "2010" , "value" : -29.765957771107 } , { "label" : "2011" , "value" : 0 } ]} — Shalini Sengar
Then get the min and max values of your $scope.data.values — Weedoze

Weedoze Weedoze · Accepted Answer · 2017-04-25T12:20:28

You can directly get the min and max from your data array

const data = [{
  key: "Cumulative Return",
  values: [{
      "label": 2010,
      "value": -29.765957771107
    },
    {
      "label": 2011,
      "value": 0
    },
    {
      "label": 2012,
      "value": 32.807804682612
    },
    {
      "label": 2013,
      "value": 196.45946739256
    },
    {
      "label": 2014,
      "value": 0.19434030906893
    },
    {
      "label": 2015,
      "value": -98.079782601442
    },
    {
      "label": 2016,
      "value": -13.925743130903
    },
    {
      "label": 2017,
      "value": -5.1387322875705
    },
    {
      "label": 2018,
      "value": -5.1387322875705
    },
    {
      "label": 2019,
      "value": -5.1387322875705
    }
  ]
}];

console.log(Math.max(...data[0].values.map(v=>v.label)));
console.log(Math.min(...data[0].values.map(v=>v.label)));

How to know min max value of a chart axis in nvd3 chart

1 Answers