JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/novus/nvd3/master/nv.d3.min.js"></script>
<div id="campaign_chart">
    <svg></svg>
</div>

CSS

#campaign_chart { height: 200px; }

JavaScript

var data = [{
    key: "Cumulative Return",
    values: [
        { "label" : "delivered","value" : 1500,"color" : "458ec1"},
        {"label" : "opened","value" : 1011,"color" : "65a1cb"},
        {"label" : "clicked","value" : 80,"color" : "7fb1d4"},
        {"label" : "unopened","value" : 487,"color" : "aacce3"},
        {"label" : "bounced","value" : 357,"color" : "eec4cc"},
        {"label" : "unsubscribed","value" : 1,"color" : "e39ba9"}					                                        ]
}];

    
    
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.yAxis.tickFormat(d3.format(',f'));

    var d3graph = d3.select('#campaign_chart svg')
            .datum(data)
            .transition().duration(300)
            .call(chart);

    d3graph.selectAll('rect').each(function(d,i){
        d3.select(this).on('click', function(d,i){
            if(reverse_map_tabs[d.label]) clickCampaignStatTab(reverse_map_tabs[d.label]);
        });
    });

    nv.utils.windowResize(chart.update);

    return chart;
});