JSFiddle - React, Tailwind, and code Playground

by FGRibreau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.js "></script>
<canvas id="weekly-clicks-chart" width="400" height="100"></canvas>

JavaScript

// defaults for all charts

var ctx = $("#weekly-clicks-chart");
var weeklyClicksChart = new Chart(ctx, {
  "type": "line",
  "options": {
    "defaultBackground": "rgba(255,255,255,1)",
    "responsive": true,
    "tooltips": {
      "enabled": false
    },
    "animation": false,
    "maintainAspectRatio": false,
    "title": {
      "display": false,
      "text": "",
      "fontSize": 15,
      "fontColor": "rgba(0,0,0,1)",
      "fontFamily": "Arial",
      "fontStyle": 100
    },
    "legend": {
      "display": false,
      "position": "bottom",
      "labels": {
        "padding": 5,
        "boxWidth": 10,
        "fontSize": 14,
        "fontColor": "rgba(0,0,0,1)"
      }
    },
    "layout": {
      "padding": {
        "left": 0,
        "right": 0,
        "top": 0,
        "bottom": 0
      }
    },
    "datalabels": [
      
    ],
    "scales": {
      "xAxes": [
        {
          "type": "category",
          "position": "bottom",
          "display": true,
          "gridLines": {
            "display": true,
            "borderDash": [
              4,
              1
            ],
            "drawTicks": true,
            "drawBorder": true,
            "zeroLineColor": "#02FF01"
          },
          "scaleLabel": {
            
          },
          "ticks": {
            "display": true,
            "autoSkip": false,
            "fontSize": 13,
            "fontColor": "#FF00FF",
            "fontFamily": "Arial",
            "min": 0,
            "reverse": false
          }
        }
      ],
      "yAxes": [
        {
          "display": true,
          "gridLines": {
            "display": false,
            "borderDash": [
              4,
              1
            ],
            "drawTicks": true,
            "drawBorder": true,
            "zeroLineColor": "#02FF01"
          },
          "scaleLabel": {
            
          },
          "ticks": {
            "display": true,
            "beginAtZero": true,
           ...