JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
    <div id='Chart'></div>
</body>

JavaScript

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group().reduceCount(function (d) {
    return d.value;
});


dc.barChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .transitionDuration(500)
    .xUnits(dc.units.ordinal)
    .x(d3.scale.ordinal().domain(XDimension))
    .renderlet(function (chart) {
        
        //Check if labels exist
        var gLabels = chart.select(".labels");
        if (gLabels.empty()){
            gLabels = chart.select(".chart-body").append('g').classed('labels', true);
        }
        
        var gLabelsData = gLabels.selectAll("text").data(chart.selectAll(".bar")[0]);
        
        gLabelsData.exit().remove(); //Remove unused elements
        
        gLabelsData.enter().append("text") //Add new elements
        
        gLabelsData
        .attr('text-anchor', 'middle')
        .attr('fill', 'white')
        .text(function(d){
            return d3.select(d).data()[0].data.value
        })
        .attr('x', function(d){ 
            return +d.getAttribute('x') + (d.getAttribute('width')/2); 
        })
        .attr('y', function(d){ return +d.getAttribute('y') + 15; })
        .attr('style', function(d){
    ...