Chartjs-Chartjs time in Xaxes

by

2👍

✅

You should use the parser property instead of format (deprecated) to parse the date. Apart from that, you have few other syntax issues which need to be fixed.

Here is the revised version of your code :

$(function() {
   new Chart(document.getElementById("Combo"), {
      "type": "bar",
      "data": {
         "labels": ["08: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"],
         "datasets": [{
            "label": "Bar Dataset",
            "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65],
            "borderColor": "rgb(255, 99, 132)",
            "backgroundColor": "rgba(255, 99, 132, 0.2)"
         }, {
            "label": "Line Dataset",
            "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65],
            "type": "line",
            "fill": false,
            "borderColor": "rgb(54, 162, 235)"
         }]
      },
      "options": {
         "scales": {
            "xAxes": [{
               type: 'time',
               time: {
                  parser: "HH:mm", //<- use 'parser'
                  unit: 'hour',
                  unitStepSize: 1,
                  displayFormats: {
                     'hour': 'HH',
                  }
               }
            }],
            "yAxes": [{
               "ticks": {
                  "beginAtZero": true
               }
            }]
         }
      }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<canvas id="Combo"></canvas>

Leave a comment