JSFiddle - React, Tailwind, and code Playground

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();

d3.select('#chart svg').datum([
  {
    key: "S1",
    visible: false,
    color: "#51A351",
    values:
      [      
        { x : "A", y : 40 },
        { x : "B", y : 30 },
        { x : "C", y : 20 }  
      ]
  },
  {
    key: "S2",
    color: "#BD362F",
    visible: true,
    values:
      [      
        { x : "A", y : 60 },
        { x : "B", y : 50 },
        { x : "C", y : 70 } 
      ]
  }
]).transition().duration(500)
    .call(chart)
    .each("end", function() {
        d3.select("g.nv-legendWrap").selectAll("g.nv-series")
            .filter(function(d) { return d.visible == false; })
            .each(function(d) {
                this.dispatchEvent(new Event("click"));
            });
    });