title: How to display date as label on x-axis in chart.js
body: <p>I am trying to display date on x.axix using chart.js. There are two values that I receive as json from database; timestamp &amp; a sensor read. I want to display a tick of the sensor read against each timestamp in chart. The data is updated periodically each few minutes.</p>
  
  <p>This is format of the timestamp:</p>
  
  <pre><code>2018-12-07 12:45:17
  </code></pre>
  
  <p><strong>Here is my code for chart so far:</strong></p>
  
  <pre><code>var ctx = document.getElementById ('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
      type: 'line',
      data: {
      labels: time_Array, // example value 2018-12-07 12:45:17 .......
      datasets: [{
      label: 'Humidity',
      data: meas_value_Array, //// example value 116, 120 110 ....
      backgroundColor: "rgba(255,153,0,0.4)"
      }]
      },
  
          options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }],
              xAxes: [{
                  type: 'time',
                  time: {
                      unit: 'minute',
                      displayFormats: {
                          second: 'h:MM:SS',
                          minute: 'h:MM',
                          hour: 'hA',
                          day: 'MMM D',
                          month: 'YYYY MMM',
                          year: 'YYYY'
                      },                            
                  },
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'value'
                  }                        
              }]                    
          }
      }
  });
  </code></pre>
  
  <p><strong>It's raising this error in firefox:</strong></p>
  
  <pre><code>TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
  determineDataLimits
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
  update
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
  n
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
  [26]&lt;/e.exports/o.each
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
  update
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
  updateLayout
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
  update
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
  [23]&lt;/e.exports/t.Controller
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
  t
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
  dspChrt3
  </code></pre>
  
  <p><strong>While chrome shows this error:</strong></p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'call' of undefined
      at a.determineDataLimits (Chart.min.js:14)
      at a.update (Chart.min.js:13)
      at n (Chart.min.js:12)
      at Object.o.each (Chart.min.js:12)
      at Object.update (Chart.min.js:12)
      at t.Controller.updateLayout (Chart.min.js:11)
      at t.Controller.update (Chart.min.js:11)
      at new t.Controller (Chart.min.js:11)
      at new t (Chart.min.js:12)
      at dspChrt3 (chart3.php:30)
  </code></pre>
  
  <p><strong>Here is code snippet where I tried to add array values hard code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   
          var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
          var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];
  
  
          //console.log(time_Array);
          //console.log(meas_value_Array);
  
          var ctx = document.getElementById ('myChart').getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'line',
          data: {
          labels: time_Array,
          datasets: [{
          label: 'Humidity',
          data: meas_value_Array,
          backgroundColor: "rgba(255,153,0,0.4)"
          }]
          },
  
              options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }],
                  xAxes: [{
                      type: 'time',
                      time: {
                          unit: 'minute',
                          displayFormats: {
                              second: 'h:MM:SS',
                              minute: 'h:MM',
                              hour: 'hA',
                              day: 'MMM D',
                              month: 'YYYY MMM',
                              year: 'YYYY'
                          },                            
                      },
                      display: true,
                      scaleLabel: {
                          display: true,
                          labelString: 'value'
                      }                        
                  }]                    
              }
          }
      });
     </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  
  &lt;html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;canvas id="myChart"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here is my whole JS code:</strong></p>
  
  <pre><code>   var Device_Data;
     var temperature, meas_value;
  
  
     function dspChrt3(Device_Data) { 
          //console.log(Device_Data);
  
          var time_Array = [];
          var meas_value_Array = [];
  
         for(var i=0; i&lt;Device_Data.length; i++) {
              time_Array.push(Device_Data[i].date_time);
              meas_value_Array.push(Device_Data[i].meas_value);
              }
  
          console.log(Device_Data[0].date_time);
          console.log(Device_Data[1].meas_value);
          date_time = Device_Data[0].date_time;
          meas_value = Device_Data[1].meas_value;
          time_Array.shift();
          time_Array.push(date_time);
          meas_value_Array.shift();
          meas_value_Array.push(meas_value);
  
          //console.log(time_Array);
          //console.log(meas_value_Array);
  
          var ctx = document.getElementById ('myChart11').getContext('2d');
          var myChart = new Chart(ctx, {
          type: 'line',
          data: {
          labels: time_Array,
          datasets: [{
          label: 'Humidity',
          data: meas_value_Array,
          backgroundColor: "rgba(255,153,0,0.4)"
          }]
          },
  
              options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }],
                  xAxes: [{
                      type: 'time',
                      time: {
                          unit: 'minute',
                          displayFormats: {
                              second: 'h:MM:SS',
                              minute: 'h:MM',
                              hour: 'hA',
                              day: 'MMM D',
                              month: 'YYYY MMM',
                              year: 'YYYY'
                          },                            
                      },
                      display: true,
                      scaleLabel: {
                          display: true,
                          labelString: 'value'
                      }                        
                  }]                    
              }
          }
      });
      }
  </code></pre>