Angular-nvD3 Bar Chart y-axis Scaling Bug (AngularJS)

All we need is an easy explanation of the problem, so here it is.

I have an application that creates one discrete bar chart. For some reason that I can’t explain (which seems to be an internal error in the library), the y-axis scales to a data value which ISN’T THE HIGHEST VALUE of integers in the array (in my array, it scales to 5674 instead of 25797). How can I fix this bug? Thank you.

Sample of my data (fetched-data.json):


Sample of the HTML (app.html):

<!DOCTYPE html>
<html ng-app="myApp">

    <meta charset="utf-8" />
    <title>Angular-nvD3 Bar Chart</title>
    <script data-require="[email protected]" data-semver="4.6.1" src=""></script>
    <link rel="stylesheet" href="style.css" rel="nofollow noreferrer noopener" />
    <link rel="stylesheet" href="" rel="nofollow noreferrer noopener" />
    <script src="//"></script>
    <script src="" charset="utf-8"></script>
    <script src=""></script>
    <script src=""></script>
    <script src="app.js"></script>

  <body ng-controller="MainCtrl">
    <nvd3 options="barOptions" data="barData"></nvd3>


Sample of my controller (app.js):

var app = angular.module('myApp', ['nvd3']);

app.controller('MainCtrl', ['$scope', 'services', function($scope, services) {     
    $scope.barData = [];

    var stock = {
      key: 'Product stock',
      values: []

    stock.values =, function(prod) {
      return {
        label: prod.ID,
        value: prod.STOCK

  $scope.barOptions = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      x: function(d){return d.label;},
      y: function(d){return d.value;},
      showValues: true,
      valueFormat: function(d){
        return d3.format(',.4f')(d);
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10

.factory('services', ['$http', function($http){
  var serviceBase = 'services/'
  var object = {};
  object.getData = function(){
    return $http.get('fetched-data.json');
  return object;

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

* UPDATE * (Meanwhile, I found a solution. I have to answer my own question.)

Simply by forcing the Y max value by adding to the chart options the following option:

yDomain: [0, 25797]

I found the solution to this “bug” here:

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply