Stacked Bar Chart

Want values as labels at the top of each region

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css">
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

JavaScript

var chart = nv.models.multiBarHorizontalChart();
chart.multibar.stacked(true);
chart.showControls(false);

d3.select('#chart svg').datum([
  {
    key: "S1",
    color: "#51A351",
    values:
      [      
         { x : "This is a really looong label", y : 40 },
         { x : "Short label", y : 30 }  
      ]
  }
]).transition().duration(500).call(chart);