JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="https://rawgit.com/pkoltermann/SideBySideImproved/dev/jquery.flot.orderBars.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>
    <div id="placeholder" style="width:800px;height:400px;"></div>
  </body>
</html>

JavaScript

var options = {
     series: {
         bars: {
             show: true,
             barWidth: 3600*24*150*1000, // 1/2 year in milliseconds,
             align: 'left'
         },
     },
     yaxes: {
         min: 0
     },
     xaxis: {
         mode: 'time',
         tickSize: [1, 'manoj']
     }
 };
 
var d1 = [[1230768000*1000, 100], 
          [1262304000*1000, 200], 
          [1293840000*1000, 300]];
var d2 = [[1230768000*1000, 50], 
          [1262304000*1000, 150], 
          [1293840000*1000, 200]];

 $(function() {
     $.plot($('#placeholder'), [{data:d1, bars:{order:1}},{data:d2, bars:{order:2}}], options);
 });