JSFiddle - React, Tailwind, and code Playground

by Tom Rauch

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<div id="example-section15">
    <div id="legendPlaceholder"></div>
    <div id="flotcontainer" style="width: 100%;height:200px; text-align: left;"></div>
</div>

CSS

.xAxis .tickLabel:nth-child(even) {
    padding-top: 18px;
}

JavaScript

$(function () {
    var overdue = {
        label: 'overdue',
        data: [
            [1, 3],
            [2, 3],
            [4, 3],
            [4, 3],
            [5, 3]
        ]
    };
    var open = {
        label: 'open',
        data: [
            [1, 4],
            [2, 4],
            [3, 4],
            [4, 4],
            [5, 4]
        ]
    };
    var completed = {
        label: 'completed',
        data: [
            [1, 3],
            [2, 3],
            [3, 3],
            [4, 3],
            [5, 3]
        ]
    };
    var dataset = [overdue, open, completed];

    var options = {
        series: {
            stack: true,
            bars: {
                show: true
            }
        },
        bars: {
            align: "center",
            horizontal: false,
            barWidth: .8,
            lineWidth: 0
        },
        grid: {
            borderWidth: 0,
            borderColor: null,
            backgroundColor: null,
            labelMargin: 10,
            minBorderMargin: 10
        },
        yaxis: {
            tickColor: "FFFFFF"
        },
        xaxis: {
            tickColor: "FFFFFF",
            ticks: [
                [1, "Colorado"],
                [2, "Georgia"],
                [3, "Hawaii"],
                [4, "Northwest"],
                [5, "Northern Cal"],
                [6, "Southern Cal"]
                
            ]
        },
        legend: {
            position: 'ne',
            show: true
        }
    };
    
    $.plot($("#example-section15 #flotcontainer"), dataset, options);
  
    
    
});