[Chartjs]-Chart.js date x-axis with sparse datapoints

What about this? My code in the JSBin

Simply use a time scale. You can set it to a specific unit like I prepared in the JSBin if you want. Otherwise chart.js decides the unit automatically.

options:
  scales: {
    xAxes: [{
      type: 'time'
    }]
  }
}

Note that I changed the fill color to rgba so you can see the gridLines. You don’t need to do that if you don’t want to.
Another change I made is removing the labels-property because you don’t need it if you follow the data-format of giving x- and y-values.

You should also note that the vertical line on the right side gets cut off. I don’t know a way to solve that problem and can’t find a solution. In your example image it works well. I would love to hear your solution to that!