title: Show Dates in x-axis when using chart.js
body: <p>I am using chart.js library. I am creating a graph and want to show dates in x-axis like here: <a href="http://www.chartjs.org/samples/latest/scales/time/line.html" rel="nofollow noreferrer">http://www.chartjs.org/samples/latest/scales/time/line.html</a></p>
  
  <p>I have provided the same configuration (except the date format of graph data) for graph as the above example provides but my graph showing time i.e 2 am, 2 am, .. instead of dates i.e 2018-02-01, 2018-02-10, ...</p>
  
  <p>For date formatting i am using the moment.js library recommended by Chart.js</p>
  
  <p>I am using following code:</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-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div style="width:75%;"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var timeFormat = 'YYYY-MM-DD';
  
      var config = {
          type: 'line',
          data: {
              datasets: [{
                  label: "Thi is graph label",
                  backgroundColor: "rgb(54, 162, 235)",
                  borderColor: "rgb(255, 159, 64)",
                  fill: false,
                  data: [{
                      x: moment("2010-03-01").format(timeFormat),
                      y: 0.668525
                  }, {
                      x: moment("2010-03-02").format(timeFormat),
                      y: 0.668827
                  }],
              }]
          },
          options: {
              title: {
                  text: "This is title"
              },
              scales: {
                  xAxes: [{
                      type: "time",
                      time: {
                          parser: timeFormat,
                          tooltipFormat: 'll HH:mm'
                      },
                      scaleLabel: {
                          display: true,
                          labelString: 'Date'
                      }
                  },],
                  yAxes: [{
                      scaleLabel: {
                          display: true,
                          labelString: 'value'
                      }
                  }]
              },
          }
      };
  
      window.onload = function () {
          var ctx = document.getElementById("canvas").getContext("2d");
          console.log(config);
          window.myLine = new Chart(ctx, config);
  
      };
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>