JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
 <div id="placeholder" class="graph-placeholder"></div>

CSS

.graph-placeholder {    
    width: 450px;
    height: 200px;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

JavaScript

var plot;
$(function() {
     
   var d1 = [[0, 3], [1, 3], [2, 5], [3, 7], [4, 8], [5, 10], [6, 11], [7, 9], [8, 5], [9, 13]];
    
   var d2 = [[0, 4], [4, 3], [2, 6], [3, 7], [4, 8], [5, 10], [6, 8], [7, 7], [8, 5], [9, 13]];
   
   var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
  
    var colorsList = ['#8B9990','#FFA614'];
    data = [
        {
            data: d1,
            color:colorsList[0], // your colors
            bars: {
                show: true,  
                align: "center",
                barWidth: 0.6
            }
        }];
    data.push({
            data: d2,
            color:colorsList[1], // your colors
            bars: {
                show: true,  
                align: "center",
                barWidth: 0.6
            }
        });
    data.push({
            data: d3,
            color:1, // default colors
            bars: {
                show: true,  
                align: "center",
                barWidth: 0.6
            }
        });

    $.plot($("#placeholder"),data);
    
});