JSFiddle - React, Tailwind, and code Playground

by FGRibreau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>

CSS

canvas{
  width:100vw;
  height:100vh;
}

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');
			window.myScatter = Chart.Scatter(ctx, {
  "type": "bar",
  "options": {
    "defaultBackground": "rgba(255,255,255,1)",
    "responsive": false,
    "tooltips": {
      "enabled": false
    },
    "animation": false,
    "maintainAspectRatio": false,
    "title": {
      "display": true,
      "text": "Temperature last week",
      "fontSize": 15,
      "fontColor": "rgba(0,0,0,1)",
      "fontFamily": "Helvetica",
      "fontStyle": 100
    },
    "legend": {
      "display": true,
      "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
      }
    },
    "scales": {
      "xAxes": [
        {
          "type": "category",
          "display": true,
          "stacked": false,
          "gridLines": {
            "display": false,
            "borderDash": [
              4,
              1
            ],
            "drawTicks": true,
            "drawBorder": true
          },
          "scaleLabel": {
            "display": true
          },
          "ticks": {
            "autoSkip": true,
            "display": true,
            "fontSize": 14,
            "fontColor": "#000",
            "min": 0,
            "reverse": false
          }
        }
      ],
      "yAxes": [
        {
          "display": true,
          "stacked": false,
          "gridLines": {
            "display": false,
            "borderDash": [
              4,
              1
            ],
            "drawTicks": true,
            "drawBorder": true
          },
          "scaleLabel": {
            "display": true
          },
          "ticks": {
            "autoSkip": true,
            "display": true,
            "fontSize": 10,
            "fontColor": "#000000",
            "min": 0,
    ...