0
Answer

NVD3 LineChart yDomain value not rendering

avinash bhujan

avinash bhujan
2y
471
1

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?
             

Next Recommended Forum