title: How to plot date/time on X but display only dates in Chart.js?
body: <p>I have a series of data points, each for a specific date/time. The time between each point varies, and the range covers several days (up to 30 days). There may be multiple points per day, or there may be days with no data points.</p>
  
  <p>I would like the X scale to show the dates (with day of week), and for the data points to be plotted where they should go based on both the date and time of day. For instance, 2018-02-15 12:00:00 would be half-way between the labels for 02-15 and 02-16.</p>
  
  <p>Here is some sample code/data:</p>
  
  <pre><code>var chartData = {
      type:'line',
      data: {
          datasets: [
              {
                  label:'Depression',
                  backgroundColor:'#00f',
                  borderColor:'#00f',
                  data:[
                      {y:3,t:Date.parse('2018/02/20 05:01:16')},
                      {y:4,t:Date.parse('2018/02/20 15:03:09')},
                      {y:5,t:Date.parse('2018/02/21 05:04:09')},
                      {y:1,t:Date.parse('2018/02/21 08:06:09')},
                      {y:5,t:Date.parse('2018/02/22 05:05:09')},
                  ],
                  fill:false,
              },
              {
                  label:'Anxiety',
                  backgroundColor:'#d0d',
                  borderColor:'#d0d',
                  data:[
                      {y:6,t:Date.parse('2018/02/20 05:01:16')},
                      {y:2,t:Date.parse('2018/02/20 15:03:09')},
                      {y:4,t:Date.parse('2018/02/21 05:04:09')},
                      {y:6,t:Date.parse('2018/02/21 08:06:09')},
                      {y:3,t:Date.parse('2018/02/22 05:05:09')},
                  ],
                  fill:false,
              },
              {
                  label:'Activity',
                  backgroundColor:'#f90',
                  borderColor:'#f90',
                  data:[
                      {y:4,t:Date.parse('2018/02/20 05:01:16')},
                      {y:1,t:Date.parse('2018/02/20 15:03:09')},
                      {y:4,t:Date.parse('2018/02/21 05:04:09')},
                      {y:7,t:Date.parse('2018/02/21 08:06:09')},
                      {y:3,t:Date.parse('2018/02/22 05:05:09')},
                  ],
                  fill:true,
              },
              {
                  label:'Physical Health',
                  backgroundColor:'#ffc',
                  borderColor:'#cc0',
                  data:[
                      {y:-2,t:Date.parse('2018/02/20 05:01:16')},
                      {y:-3,t:Date.parse('2018/02/20 15:03:09')},
                      {y:-2,t:Date.parse('2018/02/21 05:04:09')},
                      {y:-6,t:Date.parse('2018/02/21 08:06:09')},
                      {y:-5,t:Date.parse('2018/02/22 05:05:09')},
                  ],
                  fill:true,
              },
          ],
          fill:false,
      },
      'options': {
          responsive:true,
          title:{
              display:true,
              text:'Recent History',
          },
          scales: {
              xAxes:[{
                  display:true,
                  time: {
                      min:Date.parse('2018/02/01 00:00:00'),
                      max:Date.parse('2018/03/01 00:00:00'),
                      displayFormats:{
                          day:'ddd MM/DD',
                      },
                      unit:'day',
                      round:'day',
                  },
                  distribution:'linear',
                  scaleLabel: {
                      display:true,
                      labelString:'Date'
                  },
                  bounds:'data',
                  ticks: {
                      source:'data',
                  },
              }],
              yAxes:[{
                  display:true,
                  scaleLabel:'Rating'
              }]
          },
      }
  };
  </code></pre>
  
  <p>The code above only displays the first two data points in each series.
  <a href="https://i.stack.imgur.com/BKU0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKU0F.png" alt="Results Of Code In Chart.js"></a></p>
  
  <p>Thanks!</p>