JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<script src="https://rawgit.com/larsenmtl/flot.tooltip/master/js/jquery.flot.tooltip.js"></script>
   <form id="form1" runat="server">
            <div id="graph2" style="height: 300px; width: 900px;">
            </div>
   </form>

JavaScript

var dc20 = [[37, 0], [0, 1], [16, 2], [34, 3]];       
var dc21 = [[58, 0], [0, 1], [80, 2], [62, 3]];     
var dc22 = [[0, 0], [0, 1], [0, 2], [0, 3]];       
var dc23 = [[5, 0], [100, 1], [4, 2], [4, 3]];     
var dc24 = [[0, 0], [0, 1], [0, 2], [0, 3]];    

var barnumberFormatter = function (value) {
                if (value == 0)
                    return ''
                else
                    return value + '%';
            }
 $.plot($('#graph2'),
       [{ data: dc20, label: "Group1", bars: { order: 1 } },
        { data: dc21, label: "Group2", bars: { order: 2 } },
        { data: dc22, label: "Group3", bars: { order: 3 } },
        { data: dc23, label: "Group4", bars: { order: 4 } },
        { data: dc24, label: "Group5", bars: { order: 5 } }],
        {
            legend:
                { show: true, position: "ne", noColumns: 1 },
            series: {
                stack: true, bars: {
                    numbers: {
                        show: true,
                        formatter: barnumberFormatter
                    },
                    fill: 0.9, show: true, barWidth: 0.3, horizontal: true
                }
            },
            yaxis: { tickLength: 0, ticks: [[0, "Agent1"], [1, "Agent2"], [2, "Agent3"], [3, "Agent4"]] },
            xaxis: { tickLength: 0 },
            tooltip: !0, tooltipOpts: { content: function (label, xval, yval, flotItem) { return '%' + xval + 'which has ' + '?' + ' records '; }, defaultTheme: false },
            grid: {
                borderColor: "#0D2043", borderWidth: { top: 0, right: 0, bottom: 1, left: 1 },
                hoverable: true, clickable: true
            },
            colors: ['#454857', '#72818B', '#8F002E', '#17A768', '#F1601D', '#F1AD1D', '#E7E0D2', '#BBAE93', '#006666', '#CCCCCC', '#008584', '#7DA570', '#EB5C4C', '#CBD574', '#1296D4', '#F3D362']
        });