Chartjs-Displaying min/max range in hours Chart.js

by

0👍

max and min are defined directly on the axis but not inside the time option.

For further information, consult Min Max Configuration from the Chart.js documentation.

Please take a look at below runnable code snippet and see how it works.

new Chart('chart', {
    type: 'bar',
    data: {
      datasets: [{
        label: '# of Votes',
        data: [
          {x: '2022-10-03T07', y: 10},
          {x: '2022-10-03T08', y: 15},
          {x: '2022-10-03T10', y: 8},
          {x: '2022-10-03T12', y: 12},
          {x: '2022-10-03T13', y: 13},
          {x: '2022-10-03T18', y: 7}
        ],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {       
            unit: 'hour',              
            displayFormats: {
              hour: 'HH:mm',
            },
            tooltipFormat: 'd MMM yyyy HH:mm' 
          },
          min: '2022-10-03T06',
          max: '2022-10-03T23'
       }
     }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="chart" height="85"></canvas>

Leave a comment