JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="https://rawgit.com/Xinjo/AreaMarkings/master/jquery.flot.areamarkings.js"></script>
<!-- basic time series flot chart -->
<h>Create a custom green range</h>
<div style="height: 400px; width: 600px;" id="placeholder"></div>

JavaScript

var d = [
    [1418582640000, 2.45],
    [1418582640000, 5.71],
    [1418582640000, 2.50],
    [1418582640000, 12.63],
    [1418582640000, 3.14],
    
    [1421261040000, 7.45],
    [1421261040000, 5.71],
    [1421261040000, 7.50],
    [1421261040000, 7.63],
    [1421261040000, 3.14],

    [1423939440000, 7.45],
    [1423939440000, 5.71],
    [1423939440000, 7.50],
    [1423939440000, 7.63],
    [1423939440000, 3.14],

    [1426358640000, 7.45],
    [1426358640000, 5.71],
    [1426358640000, 7.50],
    [1426358640000, 7.63],
    [1426358640000, 3.14]
];

$.each(d, function (index, datapoint) {
    datapoint[0] = parseInt((new Date(datapoint[0])).getMonth())+ 1;
});

$.plot("#placeholder", [d], {
    series: {
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true,
      
    },
    yaxis: {
                mode: "time",
                tickSize: [1, "month"],
                minTickSize: [1, "month"],
                timeformat: "%b/%y",
                monthNames : ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                tickLength: 1,
                axisLabel: "Mês",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 100,
                autoscaleMargin: 0.03
    }
});