I have the following code for a line chart using nvd3:
$scope.sumAssuredOptions = {
chart: {
type: 'lineChart',
height: 450,
margin: {
top: 20,
right: 40,
bottom: 70,
left: 75
},
x: function (d) { return d.x; },
y: function (d) { return d.y; },
useInteractiveGuideline: true,
dispatch: {
stateChange: function (e) { console.log("stateChange"); },
changeState: function (e) { console.log("changeState"); },
tooltipShow: function (e) { console.log("tooltipShow"); },
tooltipHide: function (e) { console.log("tooltipHide"); }
},
xAxis: {
axisLabel: '',
tickValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
tickFormat: function (d) {
return $scope.labels[d];
},
},
yAxis: {
axisLabel: '',
axisLabelDistance: 15,
tickFormat: function (d) {
return $scope.shortenLargeNumber(d);
}
},
yDomain: [$scope.sumAssuredMinY - ($scope.sumAssuredMaxY - $scope.sumAssuredMinY) * 0.05,
$scope.sumAssuredMaxY + ($scope.sumAssuredMaxY - $scope.sumAssuredMinY) * 0.05],
xDomain: [0 - (11 - 0) * 0.05, 11 + (11 - 0) * 0.05]
},
title: {
enable: false,
text: ''
}
};
I have pre-calculated and assigned the $scope.sumAssuredMinY and $scope.sumAssuredMaxY values in another function.
$scope.sumAssuredMaxY = Math.max.apply(Math, sumAssuredReturnType.YearOnYearSumAssuredList[0]);
$scope.sumAssuredMinY = Math.min.apply(Math, sumAssuredReturnType.YearOnYearSumAssuredList[0]);
I am just passing these variable in the yDomain. When I console log these 2 values for example in the y-axis, I can see that they are correct.
yAxis: {
axisLabel: '',
axisLabelDistance: 15,
tickFormat: function (d) {
console.log($scope.sumAssuredMaxY);
console.log($scope.sumAssuredMinY);
return $scope.shortenLargeNumber(d);
}
}
Only issue is that in the yDomain, the vaules are not being passed correctly.
When I hardcode the yDomain values, the graph is generated.
yDomain: [353810308 - (375913419 - 353810308) * 0.05,375913419 + (375913419 - 353810308) * 0.05]
Why is the yDomain not taking the variable values directly?
Tasadduq BurneyPosted Dec 9, 2025, 10:32 AM
Hey,
Hope you're keeping well.
In NVD3,
yDomainis read at chart initialization, so if$scope.sumAssuredMinYand$scope.sumAssuredMaxYare being set asynchronously (e.g., after an API call or digest cycle), the chart ends up withundefinedvalues. Ensure those values are calculated before constructing$scope.sumAssuredOptions, or reassignyDomainand trigger a chart update vianv.utils.windowResize(chart.update)or your Angular directive's refresh hook once the data is ready. In AngularJS, wrapping the chart config assignment in a$timeoutafter your min/max calculation forces the digest to update the binding before NVD3 renders. This is similar to ensuring model values are ready before binding to Razor views in ASP.NET MVC—data must be present before rendering.Thanks and regards,
Taz