JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<head>
  <title>Charts</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  
  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" type="text/javascript">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js" type="text/javascript">
  </script>
</head>

<div class="main-content...

CSS

/*** CHARTS ***/
.flotChartColor1 {
    color: #204724ff;
}
.chart-legend-horizontal > li > span.flotChartBgColor1 {
    background-color: #204724ff;
}
.flotChartColor2 {
    color: #24ce29ff;
}

.chart-legend-horizontal > li > span.flotChartBgColor2 {
    background-color: #24ce29ff;
}

#main-chart {
    height: 260px;
}

JavaScript

// --------------------------------- Main chart ------------------------------ //
    function gd(year, month, day) {
        return new Date().toDateString();
    }

        var color1 = 'rgba(0,128,0 ,0.4)';
        var color2 = 'rgba(60,179,113 ,1)';
        var color3 = '';

        var data = [
            [1, 15],
            [2, 40],
            [3, 90],
            [4, 45],
            [5, 45],
            [6, 25],
            [7, 45],
            [8, 100],
            [9, 10]
        ];

        var data2 = [
            [1, 20],
            [2, 12],
            [3, 9],
            [4, 3],
            [5, 11],
            [6, 12],
            [7, 20],
            [8, 19],
            [9, 11]
        ];

        var data3 = [
            /*
            [1, 35],
            [2, 15],
            [3, 20],
            [4, 30],
            [5, 15],
            [6, 18],
            [7, 28],
            [8, 10],
            [9, 30]
            */
        ];

        var plot_statistics = $.plot($("#main-chart"), [{
            data: data,
            showLabels: true,
            label: gd(),
            labelPlacement: "below",
            canvasRender: true,
            cColor: "#FFFFFF"
        }, {
            data: data2,
            showLabels: true,
            label: gd(),
            labelPlacement: "below",
            canvasRender: true,
            cColor: "#FFFFFF"
        }, {
            data: data3,
            showLabels: true,
            label: "",
            labelPlacement: "below",
            canvasRender: true,
            cColor: "#FFFFFF"
        }], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 0,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 1
                        }, {
                            opacity: 1
                        }]
                    }
                },
   ...