JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<canvas id="chart"></canvas>

JavaScript

var labels = [
      '2020\n4/12',
      '2020\n7/14',
      '2020\n10/10'
    ];

var currentData = {
      data: [
        80, 55, 40
      ],
      fill: false,
      borderColor: 'rgb(244,154,60)',
      lineTension: 0,
      pointBorderWidth: 10,
      pointBorderColor: 'rgb(238,88,53)',
    };

 var config = {
      type: 'line',
      data: { labels: labels, datasets: [currentData]},

      options: {
        scales: {
          xAxes: [{
            ticks: {
              fontSize: 35
            }
          }],
          yAxes: [{
            ticks: {
              fontSize: 35
            }
          }]
        },
        animation: {
          duration: 0,
        },
        legend: {
          display: false,
        }
      }
    };

var myLineChart = new Chart(document.getElementById("chart"), config);