JSFiddle - React, Tailwind, and code Playground

by Asim Shariff

HTML

<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<canvas id="graph-canvas" width="800" height="400"></canvas>

JavaScript

var chartDatesArray = ["NOV 25","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00" ,"23:00","Nov 26"];
 var chartCountArray = [10,20,20,40,40,40,30,20,30,40,50,60,60,60,30,30,50,60];

var myChart = new Chart("graph-canvas", {
type: 'line',
data: {
    labels: chartDatesArray,
    datasets: [
        {
            data: chartCountArray,
           
            borderColor: "rgb(27,163,198)",
            fill: true,
            lineTension: 0,
            radius: 1,
            borderWidth: 2,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
        },
    ],
},
options: {


    scales: {
        xAxes: [{
            ticks: {
                display: true,
                fontSize: 12,
                fontColor:'red',
                callback: function(value, index, values) { 
                 var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(value);

        if (isValid) {
         return value; 
        } else {
        console.log(this.fontColor);
         return value;
        }
                        
                    }
            },
            gridLines: {
                display: true,
                drawBorder: false,
            }
        }],
        yAxes: [{
            ticks: {
                precision: 0,
                display: true,
                fontSize: 12,
                beginAtZero: true
            },
            gridLines: {
                display: true,
                drawBorder: true,
            }
        }]
    },

   ...