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

new Chart($('#graph'), {
  type: "bar",
  data: {
    "labels": [1433109600000, 1433109600000, 1435701600000, 1438380000000, 1441058400000, 1443650400000, 1446332400000, 1448924400000, 1451602800000, 1454281200000, 1456786800000, 1459461600000, 1462053600000, 1464731999000, 1433109600000, 1433109600000, 1435701600000, 1438380000000, 1441058400000, 1443650400000, 1446332400000, 1448924400000, 1451602800000, 1454281200000, 1456786800000, 1459461600000, 1462053600000, 1464731999000],
    "datasets": [{
      "data": [null, 0, 1, 0, 0, 0, 0, 0, 0, 3, 0, 22, 3, null],
      "label": "Ouverts",
      "backgroundColor": "rgba(51, 122, 183, 0.2)",
      "borderColor": "rgba(51, 122, 183, 1.0)",
      "borderWidth": 1,
      "hoverBackgroundColor": "rgba(51, 122, 183, 0.4)",
      "hoverBorderColor": "rgba(51, 122, 183, 1.0)"
    }, {
      "data": [null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, null],
      "label": "Clôturés",
      "backgroundColor": "rgba(0, 5, 137, 0.2)",
      "borderColor": "rgba(0, 5, 137, 1.0)",
      "borderWidth": 1,
      "hoverBackgroundColor": "rgba(0, 5, 137, 0.4)",
      "hoverBorderColor": "rgba(0, 5, 137, 1.0)"
    }]
  },
  options: {
    "title": {
      "display": true,
      "position": "top",
      "fullWidth": true,
      "fontSize": 12,
      "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
      "fontColor": "#666",
      "fontStyle": "bold",
      "padding": 10,
      "text": "Tickets - Ouverts / Clôturés"
    },
    "hover": {
      "mode": "label"
    },
    "scales": {
      "xAxes": [{
        "display": true,
        "stacked": true,
        "gridLines": {
          "offsetGridLines": true
        },
        "scaleLabel": {
          "display": false,
          "labelString": "",
          "fontColor": "#666",
          "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
          "fontSize": 12,
          "fontStyle": "normal"
        },
        "type": "time",
        "id": "x-axis-0",
      ...