title: How to label x-Axis in Chart.js by days?
body: <p>I'm currently trying to fetch data from blockchain.info and to display it on a Chart.js in a simple JavaScript file.</p>
  
  <p>It works just fine if my xAxes type is 'linear', but in that case the labels on the x-Axis are displayed with the numeric unix timestamp. </p>
  
  <pre><code>xAxes: [{
      type: 'linear',
      time: {
          unit: 'day',
          tooltipFormat: 'lll',
      }
  }]
  </code></pre>
  
  <p>I'd prefer the labels to be displayed in days (e.g. 27 Jan 2018) or grouped by months (30 points on the chart with 1 label -> month). For that reason I changed the xAxes type to 'time', which then results in the following error:</p>
  
  <p>"Uncaught Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at <a href="https://momentjs.com" rel="nofollow noreferrer">https://momentjs.com</a>".</p>
  
  <p>I've played around with momentjs and inclused it by the script tag. Unfortunately I wasn't able to solve the issue.</p>
  
  <p>The data in my JSON looks like this:</p>
  
  <pre><code>{
    "status": "ok",
    "name": "Confirmed Transactions Per Day",
    "unit": "Transactions",
    "period": "day",
    "description": "The number of daily confirmed Bitcoin transactions.",
    "values": [
      {
        "x": 1442534400, // Unix timestamp (2015-09-18T00:00:00+00:00)
        "y": 188330.0
      },
      ...
  }
  </code></pre>
  
  <p>Here's my complete 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-js lang-js prettyprint-override"><code>    var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&amp;cors=true';
      var request = new XMLHttpRequest();
  
      request.open('GET', requestURL);
      request.responseType = 'json';
      request.send();
      request.onload = function() {
          var response = request.response;
          drawChart(response);
      }
  
      function drawChart(jsonObj) {
  
          var ctx = document.getElementById("myChart");
          var myChart = new Chart(ctx, {
              type: 'line',
              data: {
                  labels: jsonObj["values"],
                  datasets: [{
                      label: jsonObj["name"],
                      data: jsonObj["values"],
                  }]
              },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }],
                      xAxes: [{
                          type: 'time',
                          time: {
                              unit: 'day',
                              tooltipFormat: 'lll',
                          }
                      }]                    
                  }
              }
          });            
      }   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;script src="node_modules/chart.js/dist/Chart.js"&gt;&lt;/script&gt;
  &lt;script srx="myChart.js"&gt;&lt;/script&gt;
  &lt;body&gt;
      &lt;canvas id="myChart" width="100%" height="100%"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>