ChartJS 3

by barbarina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js"></script>
<div>
 <canvas id="chart1" width="400" height="400" style="max-height: 500px;"></canvas>
</div>

JavaScript

var colors = ["#e6194b", "#3cb44b", "#42d4f4", "#911eb4", "#f58231", "#bfef45", "#4363d8", "#dcbeff", "#006400", "#800000", "#fabed4", "#ff69b4"];
var ctx1 = document.getElementById('chart1');

var labelsGrafico = ['05:00', '05:59', '06:00', '06:59', '07:00', '07:59', '08:00', '08:59', '09:00', '09:59', '10:00', '10:59', '11:00', '11:59', '12:00', '12:59', '13:00', '13:59', '14:00', '14:59', '15:00', '15:59', '16:00', '16:59', '17:00', '17:59', '18:00', '18:59', '19:00', '19:59', '20:00', '20:59'];

var chart1 = new Chart(ctx1, {
  type: 'line',
  data: {
    labels: labelsGrafico,
    // data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    datasets: [
      {
        //yAxisID: 'y',
        label:'14-02-2023', 
        data:[34.73, 34.73, 27.22, 27.22, 28.27, 28.27, 31.23, 31.23, 30.46, 30.46, 29.62, 29.62, 31.33, 31.33, 32.58, 32.58, 31.72, 31.72, 30.24, 30.24, 26.86, 26.86, 26.09, 26.09, 27.93, 27.93, 32.6, 32.6, 36.9, 36.9, 38.82, 38.82], 
        fill:false, borderColor:'#3f51b5', borderDash:[], pointRadius:[2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0], pointHitRadius:[2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 0], pointHoverRadius:5, stepped:true, hidden:false, tension:0 
      },
      
    ]
  },
  options: {
    scales: {
    x:{
       title: {
                display: true,
                text: 'Orari'
              },
               ticks: {
                callback: function (value, index, values) {
                
                    if(labelsGrafico[index].endsWith('59')){
                      return '';
                    }else{
                      return labelsGrafico[index].toString();
                    }
                  }
              } 
    },
    y1: {
        position: 'right',
              display: true,
              min: 10,
              max: 150,
              reverse: true,
              ticks: {
               ...