angularjsd3.jsnvd3.jsangularjs-nvd3-directives

Dynamically scaling up y axis range in angular-nvd3 line chart

I am using angular nvd3 directives here to build a multi-line chart. The chart automatically scales the y-axis to the maximum and minimum values among all the series that are plotted. Can I change this to perhaps 1.5 times the minimum and maximum values instead? Or any other dynamic configuration of my choosing?

Solution

  • To dynamically change the Y-Axis based on data, one way would be to assign the getMaxValue(*list*) result to a variable, if you have your data in a JSON array. For example:

    var maxValue = *dataUtil*.getMaxValue(datalist);

    then you would need to use the forceY function in nvd3, and assign the upper range to maxValue, or whatever you want(1.5 in your case):

    $scope.optionsBar.chart.forceY = [0, maxValue * 1.5];

    This will change dynamically change the Y-Axis range based on the highest data value in the data set.

    For reference, take a look at my plnkr with this implementation.