JSFiddle - React, Tailwind, and code Playground

by pawichsp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="mychart"></canvas>

JavaScript

let data = [12, 14, 13, 18, 21, 22, 25];
let labels = ["2017-01-20", "2017-01-22", "2017-01-24", "2017-01-26", "2017-01-28", "2017-01-30", "2017-02-01"];

let options = {
  scales: {
  	x: {
    	//type: 'time', 
      time: {
        unit: 'day'
      }
    },
    y0: {
    	ticks: {
      	min: 0
      }
    },
  },
};

let chartData = {
	labels: labels,
  datasets: [{
  	data: data,
    label: 'Amount of Stuff',
  	backgroundColor: '#035e7b',
  }]
};

let ctx = document.getElementById('mychart').getContext('2d');

new Chart(ctx, {
	data: chartData,
  type: 'line',
  options: options,
});