Q:

ChartJS change monthly labels as time/date

index.php
  <!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
</head>
<canvas id="myChart"></canvas>
<script  src="assets/js/script-java.js"></script>
</body>
</html>

script-java.js
var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
      labels: ["January","Fberuary","March"],
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [120, 10, 5, 2, 20, 30, 45],

      }]
  },

  // Configuration options go here
  options: {}
});

output:

Here are the code, as you can see,  my labels are Monthly names, how can I replace it with time/data? What I am trying to achieve is like stock market chart where you can see what date and time a data went it.
Thanks
EDIT: I just saw a documentation: https://www.chartjs.org/docs/latest/axes/cartesian/time.html
I tried it, the code script is now:
var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [120, 10, 5, 2, 20, 30, 45],

      }]

  },

  // Configuration options go here
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
});

But now, nothing is showing.

A:

var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {
type: 'line',

// The data for our dataset
data: {
    datasets: [{
        label: "My First dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        // data : [10,20]
        data: [{x: new Date(), y:15},{x: moment().add(10,'days'), y:50},
        {x : moment().add(15,'days'), y:20}],

    }]

},

// Configuration options go here
  options: {
      scales: {
          xAxes: [{
              type: 'time',
              time: {
                // unit: 'month',
                  displayFormats: {
                      quarter: 'MMM YYYY'
                  }
              }
          }]
      }
  }
});

