JSFiddle - React, Tailwind, and code Playground

by Aljohn Acal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>
<div id="bar_chart">
<svg></svg>
</div>

JavaScript

nv.addGraph(function() {
    var chart = nv.models.multiBarHorizontalChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
      //  .yDomain([0, parseFloat(maxY)])
        .margin({top: 30, right: 20, bottom: 50, left: 175})
        .showValues(false)           //Show bar value next to each bar.
        .showControls(false);        //Allow user to switch between "Grouped" and "Stacked" mode.


    d3.select('#bar_chart svg')
        .datum(sample_json())
        .transition().duration(1000)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

function sample_json(){
var data = [
  {
    "key": "Example A",
    "color": "#4f99b4",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 2.8082472075876
      } , 
      {
        "label" : "200000200000000" ,
        "value" : 3.8082472075876
      } 
    ]
  },
  {
    "key": "Example B",
    "color": "#ff7f0e",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 3.8082472075876
      }
    ]
  },
  {
    "key": "Example C",
    "color": "#aec7e8",
    "values": [
      {
        "label" : "200000200000000" ,
        "value" : 8.8082472075876
      } 
    ]
  }
]

return data;
}