React-chartjs-2: Scatter graph with string date x-Axis

[thanh121094]

I followed react-chartjs-2 configure in and it's working for me. But as you can see, the data array is:
`data1: [{ x: 65, y: 75 },
{ x: 59, y: 49 },
{ x: 80, y: 90 },
{ x: 81, y: 29 },
{ x: 56, y: 36 },
{ x: 55, y: 25 },
{ x: 40, y: 18 },
],data2: [
{ x: 11, y: 33 },
{ x: 23, y: 11 },
{ x: 44, y: 44 },
{ x: 12, y: 55 },
{ x: 55, y: 66 },
{ x: 31, y: 66 },
{ x: 55, y: 186},
]
It's number. Now a day, I want to configure chart for data like this:

`data1: [
{ x: '2018-12-10T06:14:29.508Z', y: 75 },

    { x:  '2018-12-10T06:14:30.508Z', y: 49 },
    { x:  '2018-12-10T06:14:31.508Z', y: 90 },
    { x:  '2018-12-10T06:14:32.508Z', y: 29 },
    { x:  '2018-12-10T06:14:33.508Z', y: 36 },
    { x:  '2018-12-10T06:14:34.508Z', y: 25 },
    { x:  '2018-12-10T06:14:35.508Z', y: 18 },
  ],data2: [
    { x: '2018-12-10T06:14:29.508Z', y: 33 },
    { x:  '2018-12-10T06:14:30.508Z', y: 11 },
    { x:  '2018-12-10T06:14:31.508Z', y: 44 },
    { x:  '2018-12-10T06:14:32.508Z', y: 55 },
    { x:  '2018-12-10T06:14:33.508Z', y: 66 },
    { x:  '2018-12-10T06:14:34.508Z', y: 66 },
    { x:  '2018-12-10T06:14:35.508Z', y: 186},
  ]`

My x-Axis is date and it is not render anything. So, i want to know how can i configure scatter chart with react-chartjs-2 for my project.
I am trying as below but it's also not working.

`scales: {

      xAxes: [
        {
          ticks: {
            autoSkip:true,
            // autoSkipPadding: 10,
            // maxTicksLimit:10,
            source: 'auto',
            maxRotation: 0
          }
        }, {
          type: 'time',
          time: {
            millisecond: 'mm:ss',
            second: 'mm:ss',
            minute: 'HH:mm',
            hour: 'HH:mm',
            day: 'MMM DD',
            week: 'MMM DD',
            month: 'YYYY MMM',
            quarter: 'YYYY MMM',
          }
        }
      ], yAxes: [{
        display: true,
        ticks: {
          beginAtZero: false,
        },
        suggestedMax: 600,
        suggestedMin: 0,
      }]
    }
  }`

I want to know how can I configure my graph with date xAxis?
Hope your help.
Thanks

[JonathanSidego]

I'd also love to figure this out.

[adithyamaheshb]

you need to have some kind of UNIX time stamp in the x value. We are using Moment and you can get the time stamp using
Moment.utc(2018-12-10T06:14:30.508Z).valueOf()

[Develer]

you don't need some special manipulation with time. Just add time parser to scales like this:

options: {
    ...
    scales: {
        xAxes: [{
            type: 'time',
            time: { parser: 'YYYY/MM/DD HH:mm:ss' },
          }],
    ....

then you can use your date:

    { x: moment.utc(some_your_date).format('YYYY/MM/DD HH:mm:ss'), y: ... }