JSFiddle - React, Tailwind, and code Playground

by petran

HTML

<link rel="stylesheet" href="http://nvd3.org/css/syntax.css">
<link rel="stylesheet" href="http://nvd3.org/css/common.css">
<script src="http://d3js.org/d3.v2.min.js"></script>
<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;
    height:300px;
}

JavaScript

var data = 
      {
        key: "Cumulative Return",
        values: [
          { 
            "label" : "CDS / Options" ,
            "value" : 5
          } , 
          { 
            "label" : "Cash" , 
            "value" : 4
          }]
      };

  nv.addGraph(function() {
     var chart = nv.models.discreteBarChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .tooltips(false)
         .showValues(true).margin({top: 10, right: 0, bottom: 0, left: 0});
 
     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;
     });