ChartJS Scatter Graph X Axis Label Not showing up properly

Question

I am fairly new to javascript world, so bear with me if there is an obvious solution to this, but I'm struggling to graph the dates (X-points) on the X axis of the chartjs graph. I get some weird times there that you can check on jsfiddle. What am I doing wrong?

var ctx = document.getElementById("myChart");
var data = {
   datasets: [{
       label: " Property",
       lineTension: 0.1,
       data: [{
           x: 2017 - 04 - 11,
           y: 2000000.00
         },
         {
           x: 2017 - 04 - 12,
           y: 1000000.00
         },
         {
           x: 2017 - 04 - 13,
           y: 3000000.00
         },
       ]
     },
     {
       label: " Property",
       lineTension: 0.1,
       data: [{
           x: 2017 - 04 - 12,
           y: 472943.00
         },
         {
           x: 2017 - 04 - 13,
           y: 1000000.00
         },
       ]
     },
   ]
 };
 var myLineChart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
     scales: {
       xAxes: [{
         id: 'ScartCharxAxes',
         type: 'time',
         unit: 'day',
         time: {
           displayFormats: {
             day: 'D MMM YYYY'
           },
         }
       }]
     }
   }
 });

My code is available on http://jsfiddle.net/py1bpf02/3/

Answer 1

In your datasets, dates should be strings. What you did is math, not dates. 2017-04-11 = 2002.

var ctx = document.getElementById("myChart");
var data = {
  datasets: [

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-11",
          y: 2000000.00
        },

        {
          x: "2017-04-12",
          y: 1000000.00
        },

        {
          x: "2017-04-13",
          y: 3000000.00
        },
      ]
    },

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-12",
          y: 472943.00
        },

        {
          x: "2017-04-13",
          y: 1000000.00
        },
      ]
    },


  ]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      xAxes: [{
        id: 'ScartCharxAxes',
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM'
          },
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>