JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.js"></script>
<div>
  <canvas id="graph" width="300" height="200"></canvas>
</div>

JavaScript

var graphObj = {
  "period": false,
  "type": "bar",
  "data": {
    "labels": [1433000000000, 1433109600000, 1435701600000, 1441058400000, 1443650400000, 1446332400000, 1448924400000, 1451602800000, 1454281200000, 1456786800000, 1462053600000, 1464731999000, 1470000000000],
    "datasets": [{
      "label": "Ouverts",
      "backgroundColor": "rgba(123,99,132,0.2)",
      "borderColor": "rgba(123,99,132,1)",
      "borderWidth": 1,
      "hoverBackgroundColor": "rgba(123,99,132,0.4)",
      "hoverBorderColor": "rgba(123,99,132,1)",
      "data": [1, 3, 1, 0, 0, 0, 0, 0, 3, 0, 22, 3, 12]
    }, {
      "label": "Clôturés",
      "backgroundColor": "rgba(255,99,132,0.2)",
      "borderColor": "rgba(255,99,132,1)",
      "borderWidth": 1,
      "hoverBackgroundColor": "rgba(255,99,132,0.4)",
      "hoverBorderColor": "rgba(255,99,132,1)",
      "data": [2, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 4]
    }],
    "histo": true
  },
  "options": {
    "hover": {
      "mode": "label"
    },
    "scales": {
      "xAxes": [{
        "display": true,
        "stacked": true,
        "gridLines": {
          "offsetGridLines": true
        },
        "type": "time",
        "id": "x-axis-0",
        "categoryPercentage": 0.8,
        "barPercentage": 0.8,
        "time": {
          "displayFormats": {
            "millisecond": "SSS [ms]",
            "second": "h:mm:ss a",
            "minute": "h:mm:ss a",
            "hour": "MMM D, hA",
            "day": "ll",
            "week": "ll",
            "month": "MMM YYYY",
            "quarter": "[Q]Q - YYYY",
            "year": "YYYY"
          },
          "unit": "month"
        }
      }],
      "yAxes": [{
        "display": true,
        "stacked": true,
        "gridLines": {
          "offsetGridLines": true
        },
        "type": "linear",
        "id": "y-axis-0"
      }]
    }
  }
};

new Chart($('#graph'), {
  type: graphObj.type,
  data: graphObj.data,
  options: graphObj.options
});