JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/paradoxxxzero/flot/28f2377382b3af97c82cb3ebc081140b49fa9579/jquery.flot.js"></script>
<script src="https://raw.github.com/flot/flot/master/jquery.flot.stack.js"></script>
  <div id="placeholder" style="width:550px;height:200px;"></div>

JavaScript

$(function () {
    var css_id = "#placeholder";
    var data = [
        {label: 'foo', data: [[1,300], [2,300], [3,300], [4,300]]},
        {label: 'bar', data: [[1,800], [2,600], [3,400], [4,200]]},
        {label: 'baz', data: [[1,100], [2,200], [3,300], [4,400]]},
    ];
    var options = {
        series: {stack: 1,
                 bars: {show: true, barWidth: 0.9, align: 'center',},},
                 xaxis: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], [4,'Four']]},
        legend: {sorted: true}                        
    };

    $.plot($(css_id), data, options);
});