JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<div id="social-graph">
    <svg></svg>
</div>

CSS

#social-graph {
    width:150px;
}
.nv-legendWrap {
    display: none;
}
.nv-axis {
    display: none;
}

rect {
   display: inline-block;
   margin-top: 25px;
   margin-bottom: 5px;
}

JavaScript

/* nvd3 */


 var data =  {
    "key": "Series2",
    "color": "#1f77b4",
    "values": [
      { 
        "label" : "Group A" ,
        "value" : 25.307646510375
      } , 
      { 
        "label" : "Group B" ,
        "value" : 16.756779544553
      } , 
      { 
        "label" : "Group C" ,
        "value" : 18.451534877007
      } , 
      { 
        "label" : "Group D" ,
        "value" : 8.6142352811805
      } , 
      {
        "label" : "Group E" ,
        "value" : 7.8082472075876
      } , 
      { 
        "label" : "Group F" ,
        "value" : 5.259101026956
      } , 
      { 
        "label" : "Group G" ,
        "value" : 0.30947953487127
      } , 
      { 
        "label" : "Group H" ,
        "value" : 0
      } , 
      { 
        "label" : "Group I" ,
        "value" : 0 
      }
    ]
  };

  nv.addGraph(function() {
     var chart = nv.models.multiBarHorizontalChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .margin({top: 5, right: 5, bottom: 5, left: 5})
         .showValues(false)
         .tooltips(true)
         .showControls(false);
 
     chart.yAxis
         .tickFormat(d3.format('d'));
 
     d3.select('#social-graph svg')
         .datum([data])
       .transition().duration(500)
         .call(chart);
 
       nv.utils.windowResize(chart.update);
   
       return chart;
     });