Chartjs time in Xaxes

Question

So i've been trying to generate time points in the Xaxes in my chart. I've found some examples, of different kinds but none of them have worked. The doc for Chartjs is a bit fuzzy for me. So how do i insert generated time in my xaxes?

 $j(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":[{
    time:{
    unit:"hour"}
    }],
    xAxes: [{
  type: 'time',
  time: {
    format: "HH:mm",
    unit: 'hour',
    unitStepSize: 1,
    displayFormats: {
      'hour': 'HH', 

    },
}],
    "yAxes":[{
    "ticks":{"beginAtZero":true}
    }]
    }
    }
    });
});

Answer 1

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>