JSFiddle - React, Tailwind, and code Playground

by Shabeer Sheffa

HTML

<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<h2>MultiBar Horizontal Chart</h2>

<div id="Chart">
    <svg></svg>
</div>

JavaScript

var width = 450,
    height = 350;

nv.addGraph(function () {
    var chart = nv.models.multiBarHorizontalChart().x(function (d) {
        return d.x
    }).y(function (d) {
        return d.y
    }).margin({
        left: 100
    }).width(width).height(height).tooltips(true).tooltip(function (key, x, y, e, graph) {
        return '<h3>' + x + '</h3>' + '<p>' + y + '</p>'
    }).showControls(false).stacked(true).showLegend(false);


    d3.select('#Chart svg')
        .datum(data)
        .transition().attr('width', width).attr('height', height).duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "values": [{
        "x": "Group A",
            "y": 120000
    }, {
        "x": "Group B",
            "y": 100000
    }, {
        "x": "Group Ct",
            "y": 89000
    }, {
        "x": "Group Ci",
            "y": 89000
    }, {
        "x": "Group C",
            "y": 85000
    }]
}]