CODEWITHSUNDEEP
javascriptchart.js
Baptiste
Baptiste

Reputation: 1785

Chart.js hours scale show day switch

I have an array of date for 2 days and I would like to show only hours. No problem for that.

But since we have 2 days, there is no way to see the day switch in the graph. Is there a way to have hours and then a tick with the day when we are switching ?

Something like that :

enter image description here

Thanks !

var labels = ['2018-12-20 14:00', '2018-12-20 15:00', '2018-12-20 16:00', '2018-12-20 17:00', '2018-12-20 18:00', '2018-12-20 19:00', '2018-12-20 23:00', '2018-12-21 02:00', '2018-12-21 03:00', '2018-12-21 04:00', '2018-12-21 05:00', '2018-12-21 10:00'];
var data = [256,24,14,12,154,123,23,254,145,123,11,255];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Tickets selling',
         data: data,
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
                autoSkip: true,
                maxTicksLimit: 20,
                maxRotation: 0,
            },
            type: 'time',
            time: {
               unit: 'hour',
               displayFormats: {
                  hour: 'HH:mm'
               }
            }
         }]
      },
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 6

Views: 4790

Answers (1)

Robert Pringle
Robert Pringle

Reputation: 126

This can be done using the major ticks option in chartjs.

scales: {
  xAxes: [{
    type: 'time',
    time: {
        unit: 'hour',
        stepSize: 3, // I'm using 3 hour intervals here
        tooltipFormat: 'HH:mm',
    },
    ticks: {
        major: {
           enabled: true, // <-- This is the key line
           fontStyle: 'bold', //You can also style these values differently
           fontSize: 14 //You can also style these values differently
        },
    },
  }]
}

This produces an x axis like the follwong This produces an x axis like this

Upvotes: 10

Related Questions