JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

JavaScript

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
  }
});