JSFiddle - React, Tailwind, and code Playground

by Sherif Ahmed

HTML

<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<div id='Chart' style="width:500px; height:300px;"></div>

JavaScript

var arrC1 = [[7,5], [3,4],[4,3],[6,2],[4,1]];
var arrC2 = [[2,5], [1,4],[0,3],[5,2],[4,1]];

var ticksl = [[5, "Five"], [4, "Four"], [3, "Three"], [2,"Two"], [1,"One"]];

var data = [{bars:{order:1},data: arrC1,color: 'red'}, 
            {bars:{order:2},data: arrC2,color: 'green'}];

var bWidth=0.43;

$.plot($('#Chart'), data, {
    series: {
        bars: {
            show:true,
            lineWidth: 1,
            barWidth: bWidth,
            order: 1,
            horizontal: true
        }
    },
    grid: {
        align: "center"
    },
    legend: {
        show: true
    },
    yaxis:{
    	ticks: ticksl,
        autoscaleMargin: 0.8
    }
});