NVD3 Stacked Bar Chart

Slightly modified code from multiBar example at http://nvd3.org/livecode/#codemirrorNav to demonstrate defaulting to stacked bar.

HTML

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

CSS

#chart1 svg {
  height: 400px;
}

JavaScript

// Slightly modified code from multiBar example at
// http://nvd3.org/livecode/#codemirrorNav
// to demonstrate defaulting to stacked bar

var sample_data = [{
  "key": "Stream1",
  "values": [{
    "x": "A",
    "y": 10
  }, {
    "x": "B",
    "y": 4
  }]
}, {
  "key": "Stream2",
  "values": [{
    "x": "A",
    "y": 12
  }, {
    "x": "B",
    "y": 10
  }]
}]

nv.addGraph(function() {
  var chart = nv.models.multiBarChart()
    .stacked(true)
    .showControls(false)
    .showLegend(false)
    .width(300);


  chart.multibar.stacked(true); // default to stacked
  chart.showControls(false); // don't show controls

  d3.select('#chart1 svg')
    .datum(sample_data)
    .transition().duration(500).call(chart);

  nv.utils.windowResize(chart.update);

  var yValueScale = chart.yAxis.scale();
  var yValue = 0;
  var svg = d3.select("#chart1 svg");
  var xValueScale = chart.xAxis.scale();

  svg.append("line")
    .style("stroke", "#FF7F0E")
    .style("stroke-width", "2.5px")
    .attr("x1", xValueScale("A"))
    .attr("y1", yValueScale(yValue))
    .attr("x2", xValueScale("C") )
    .attr("y2", yValueScale(yValue));
  return chart;
});