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

Question

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?

Answer 1

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.