JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/lib/fisheye.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

JavaScript

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .staggerLabels(true)
      .tooltips(false)
      .showValues(true)
  
  chart.forceY([10000000]);
  chart.margin().left = 20
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);


  nv.utils.windowResize(chart.update);

  return chart;
});

var data = [
  {
    key: "Cumulative Return",
    values: [
      { 
        "label" : "A" ,
        "value" : -29.765957771107
      } , 
      { 
        "label" : "B" , 
        "value" : 0
      } , 
      { 
        "label" : "C" , 
        "value" : 32.807804682612
      } , 
      { 
        "label" : "D" , 
        "value" : 196.45946739256
      } , 
      { 
        "label" : "E" ,
        "value" : 0.19434030906893
      } , 
      { 
        "label" : "F" , 
        "value" : -98.079782601442
      } , 
      { 
        "label" : "G" , 
        "value" : -13.925743130903
      } , 
      { 
        "label" : "H" , 
        "value" : -5.1387322875705
      }
    ]
  }
]