title: stacked bar chart has white space in between, y0 starting at wrong spot?
body: <p>I'm getting this weird behavior in nvd3 where I have a white space in between the bars on a stacked bar chart that look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DASdV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DASdV.png" alt="enter image description here"></a></p>
  
  <p>My data on the html shows up like this:</p>
  
  <pre><code>[
    {
      "color": "#7C97B7", 
      "key": "Both", 
      "values": [
        {
          "key": "Both", 
          "series": 0, 
          "size": 1, 
          "values": 1, 
          "x": 2015, 
          "y": 1, 
          "y0": 0, 
          "y1": 1
        }, 
        {
          "key": "Both", 
          "series": 0, 
          "size": 1, 
          "values": 1, 
          "x": 2016, 
          "y": 1, 
          "y0": 0, 
          "y1": 1
        }, 
        {
          "key": "Both", 
          "series": 0, 
          "size": 1, 
          "values": 1, 
          "x": 2017, 
          "y": 1, 
          "y0": 0, 
          "y1": 1
        }, 
        {
          "key": "Both", 
          "series": 0, 
          "size": 0, 
          "values": 0, 
          "x": 2018, 
          "y": 0, 
          "y0": 0, 
          "y1": 0
        }, 
        {
          "key": "Both", 
          "series": 0, 
          "size": 0, 
          "values": 0, 
          "x": 2019, 
          "y": 0, 
          "y0": 0, 
          "y1": 0
        }
      ]
    }, 
    {
      "color": "#FF0000", 
      "key": "Unknown", 
      "values": [
        {
          "key": "Unknown", 
          "series": 1, 
          "size": 2, 
          "values": 2, 
          "x": 2015, 
          "y": 2, 
          "y0": 1, 
          "y1": 3
        }, 
        {
          "key": "Unknown", 
          "series": 1, 
          "size": 2, 
          "values": 2, 
          "x": 2016, 
          "y": 2, 
          "y0": 1, 
          "y1": 3
        }, 
        {
          "key": "Unknown", 
          "series": 1, 
          "size": 1, 
          "values": 1, 
          "x": 2017, 
          "y": 1, 
          "y0": 1, 
          "y1": 2
        }, 
        {
          "key": "Unknown", 
          "series": 1, 
          "size": 0, 
          "values": 0, 
          "x": 2018, 
          "y": 0, 
          "y0": 0, 
          "y1": 0
        }, 
        {
          "key": "Unknown", 
          "series": 1, 
          "size": 0, 
          "values": 0, 
          "x": 2019, 
          "y": 0, 
          "y0": 0, 
          "y1": 0
        }
      ]
    }, 
    {
      "color": "#ff7f0e", 
      "key": "Cloud", 
      "values": [
        {
          "key": "Cloud", 
          "series": 2, 
          "size": 1, 
          "values": 1, 
          "x": 2016, 
          "y": 1, 
          "y0": 3, 
          "y1": 4
        }, 
        {
          "key": "Cloud", 
          "series": 2, 
          "size": 2, 
          "values": 2, 
          "x": 2017, 
          "y": 2, 
          "y0": 3, 
          "y1": 5
        }, 
        {
          "key": "Cloud", 
          "series": 2, 
          "size": 3, 
          "values": 3, 
          "x": 2018, 
          "y": 3, 
          "y0": 2, 
          "y1": 5
        }, 
        {
          "key": "Cloud", 
          "series": 2, 
          "size": 3, 
          "values": 3, 
          "x": 2019, 
          "y": 3, 
          "y0": 0, 
          "y1": 3
        }, 
        {
          "key": "Cloud", 
          "series": 2, 
          "size": 0, 
          "values": 0, 
          "x": 2015, 
          "y": 0, 
          "y0": 0, 
          "y1": 0
        }
      ]
    }
  ]
  </code></pre>
  
  <p>and then my data that I feed into the chart in the controller is this:</p>
  
  <pre><code>[
      {
        "color": "#7C97B7", 
        "key": "Both", 
        "values": [
          {
            "values": 1, 
            "x": 2015
          }, 
          {
            "values": 1, 
            "x": 2016
          }, 
          {
            "values": 1, 
            "x": 2017
          }, 
          {
            "values": 0, 
            "x": 2018
          }, 
          {
            "values": 0, 
            "x": 2019
          }
        ]
      }, 
      {
        "color": "#FF0000", 
        "key": "Unknown", 
        "values": [
          {
            "values": 2, 
            "x": 2015
          }, 
          {
            "values": 2, 
            "x": 2016
          }, 
          {
            "values": 1, 
            "x": 2017
          }, 
          {
            "values": 0, 
            "x": 2018
          }, 
          {
            "values": 0, 
            "x": 2019
          }
        ]
      }, 
      {
        "color": "#ff7f0e", 
        "key": "Cloud", 
        "values": [
          {
            "values": 1, 
            "x": 2016
          }, 
          {
            "values": 2, 
            "x": 2017
          }, 
          {
            "values": 3, 
            "x": 2018
          }, 
          {
            "values": 3, 
            "x": 2019
          }, 
          {
            "values": 0, 
            "x": 2015
          }
        ]
      }
    ]
  </code></pre>
  
  <p>and my chart options looks like this:</p>
  
  <pre><code>$scope.options_scn_cst_compare = {
      chart: {
          type: multiBarChart,
          showControls: true,
          groupSpacing: .2,
          height: 450,
          margin: {
              top: 20,
              right: 20,
              bottom: 45,
              left: 90
          },
          x: function(d){ return d.x; },
          y: function(d){ return d.values; },
          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"); }
          },
          clipEdge: true,
          duration: 500,
          stacked: true,
          xAxis: {
              axisLabel: xLbl(),
              showMaxMin: true,
              tickFormat: function(d) {
  
                      if (yAxistm === 'yr') {
  
                          return d;
  
                      } else if (yAxistm === 'qtr') {
  
                          var dt = parseInt(d);
                          return d3.time.format('%b %y')(new Date(dt));
  
                      } else if (yAxistm === 'mth') {
  
                          var dt = parseInt(d);
                          return d3.time.format('%b %y')(new Date(dt));
  
                      };
  
                  }
              },
          yAxis: {
              axisLabel: "Cost",
              axisLabelDistance: 30,
              tickFormat: function(d){
                  return d3.format('$,f')(d);
              },
          },
          callback: function(chart){}
      },
      title: {
              enable: true,
              text: ttlLblCst()
          },
          subtitle: {
              enable: false,
              text: 'Put your Subtitle here.',
              css: {
                  'text-align': 'center',
                  'margin': '10px 13px 0px 7px'
              }
          },
      caption: {
          enable: false,
          html: 'Put your Caption Here.',
          css: {
              'text-align': 'justify',
              'margin': '10px 13px 0px 7px'
          }
      }
  
  };
  </code></pre>
  
  <p>It looks like the y0 is starting at the wrong spot for some reason...</p>