JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  (function() {
    "use strict";
    var ctx = document.getElementById("line_chart");
    window.line_chart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: {
          "label": "US Dates",
          "data": [{
            "x": "04\/01\/2014",
            "y": 175
          }, {
            "x": "10\/01\/2014",
            "y": 175
          }, {
            "x": "04\/01\/2015",
            "y": 178
          }, {
            "x": "10\/01\/2015",
            "y": 178
          }],
          "fill": "false",
          "borderColor": "red"
        }
      },
      options: {
        "responsive": true,
        "legend": {
          "display": false,
          "position": "left",
          "align": "center",
          "fullWidth": false,
          "reverse": false,
          "labels": {
            "boxWidth": 12,
            "fontSize": 12,
            "fontStyle": "normal",
            "fontColor": "#666",
            "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            "padding": 10
          }
        },
        "title": {
          "display": true,
          "text": "Monthly Graph",
          "position": "top",
          "fontSize": 12,
          "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
          "fontColor": "#666",
          "fontStyle": "bold",
          "padding": 10,
          "lineHeight": 1.2
        },
        "scales": {
          "xAxes": {
            "type": "time",
            "time": {
              "format": "DD\/MM\/YYYY",
              "tooltipFormat": "ll"
            },
            "scaleLabel": {
              "display": true,
              "labelString": "Date"
            }
          },
          "yAxes": {
            "scaleLabel": {
              "display": true,
              "labelString": "value"
            }
          }
        },
        "spanGaps": true
      }
    });
  })();
});