JSFiddle - React, Tailwind, and code Playground

by Shabeer Sheffa

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;
}
.nv-legendWrap {
    display: none;
}
.nv-axis {
    display: none;
}
rect {
    display: inline-block;
    margin-top: 25px;
    margin-bottom: 5px;
}

JavaScript

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

          d3.select(".nv-bar .positive .hover").on('click', function () {
              alert("test");
          });

          return chart;
      });