title: chart.js automatic x axis distributed in time milliseconds
body: <p>I'm building a local html file that will generate some graphs using <a href="http://%20https://www.chartjs.org/docs/" rel="nofollow noreferrer">chartjs</a> when offline. I'm just testing some example data I have.</p>
  
  <p>See fiddle below.</p>
  
  <p><a href="http://jsfiddle.net/joshmoto/0odcemL7/" rel="nofollow noreferrer">http://jsfiddle.net/joshmoto/0odcemL7/</a></p>
  
  <p>The issue is, i've set 8 points of data for each dataset, but the graph is only outputting 2 points for each dataset.</p>
  
  <p>I need my x axis to display a automatic time grid distributed in seconds. My time data consists millisecond data, but my x axis grid needs to show steps in seconds. But my points must remain accurately positioned on the graph within the steps as the data is milliseconds.
  .</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 ctx = document.getElementById('log_chart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        label: 'Engine Speed',
        backgroundColor: '#ff0000',
        borderColor: '#ff0000',
        fill: false,
        data: [{
          t: new Date(0.37),
          y: 2640
        }, {
          t: new Date(0.85),
          y: 2560
        }, {
          t: new Date(1.33),
          y: 2560
        }, {
          t: new Date(1.78),
          y: 2560
        }, {
          t: new Date(2.23),
          y: 2680
        }, {
          t: new Date(2.7),
          y: 2920
        }, {
          t: new Date(3.16),
          y: 3200
        }, {
          t: new Date(3.63),
          y: 3520
        }]
      }, {
        label: 'Mass Air Flow - Sensor',
        backgroundColor: '#00FFFF',
        borderColor: '#00FFFF',
        fill: false,
        data: [{
          t: new Date(0.02),
          y: 19.58
        }, {
          t: new Date(0.45),
          y: 16.28
        }, {
          t: new Date(0.92),
          y: 8.56
        }, {
          t: new Date(1.39),
          y: 8.47
        }, {
          t: new Date(1.86),
          y: 23.36
        }, {
          t: new Date(2.33),
          y: 45.78
        }, {
          t: new Date(2.78),
          y: 56.03
        }, {
          t: new Date(3.23),
          y: 62.36
        }]
      }],
  
    },
    options: {
      scales: {
        // xAxes: [{
        //     type: 'time',
        //     displayFormats: {
        //         quarter: 'ss.SSS'
        //     },
        //     time: {
        //         unit: 'second'
        //     }
        // }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="col-12 mt-3 mb-3"&gt;
  
      &lt;canvas id="log_chart" width="600" height="200"&gt;&lt;/canvas&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><br/></p>
  
  <p>Basically the data works like this...</p>
  
  <p><code>t</code> is the <code>x</code> axis but in time format seconds.</p>
  
  <p><code>y</code> is the value ranging from 0 - 5000</p>
  
  <p><br/></p>
  
  <p>I'm trying my hardest to follow the docs but struggling to work this one out, I can't see anything obvious. If anyone can help out that would be awesome. </p>