JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<div id="chart" style="width:500px; height:350px;"></div>

JavaScript

var data3 = [
    [gd(2014, 1, 1), 800],
    [gd(2014, 2, 2), 500],
    [gd(2014, 3, 3), 600],
    [gd(2014, 4, 4), 700],
    [gd(2014, 5, 5), 500],
    [gd(2014, 6, 6), 456],
    [gd(2014, 7, 7), 800],
    [gd(2014, 8, 8), 589],
    [gd(2014, 9, 9), 467],
    [gd(2014, 10, 10), 876],
    [gd(2014, 11, 11), 689],
    [gd(2014, 12, 12), 700]
];

var data2 = [
    [gd(2014, 1, 1), 700],
    [gd(2014, 2, 2), 300],
    [gd(2014, 3, 3), 400],
    [gd(2014, 4, 4), 200],
    [gd(2014, 5, 5), 200],
    [gd(2014, 6, 6), 100],
    [gd(2014, 7, 7), 500],
    [gd(2014, 8, 8), 400],
    [gd(2014, 9, 9), 300],
    [gd(2014, 10, 10), 400],
    [gd(2014, 11, 11), 200],
    [gd(2014, 12, 12), 300]
];

var dataset = [{
    label: "Receber",
    data: data3,
    color: "#1ab394",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7,
        order: 1
    }
}, {
    label: "Pagar",
    data: data2,
    color: "#464f88",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7,
        order: 2
    },
}];
var options = {
    xaxis: {
        mode: "time",
        tickSize: [1, "month"],
        tickLength: 0,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Arial',
        axisLabelPadding: 10,
        color: "#838383",
        timeformat: "%b/%y"
    },
    yaxes: [{
        position: "left",
        max: 1070,
        color: "#838383",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Arial',
        axisLabelPadding:10
    }, {
        position: "right",
        clolor: "#838383",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 10,
        axisLabelFontFamily: ' Arial',
        axisLabelPadding: 100
    }],
    legend: {
        noColumns: 1,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true, // Usa...