Chart.js: show only labels on the x axis for data points

Question

I am making a chart using Chart.js and have a problem about the x axis of my line chart. I made a multi-line chart, and everything looks good, as you can see in the image below. What I would like to achieve is that the labels on my x-axis (dates) are displayed only when there is a data point on the chart, so not all days are as they are now. I actually don't have that much experience with all of the web development, so any help is appreciated. Thanks in advance.

My code in its current form:

function newDate(day, month) {
  return moment().date(day).month(month);
}

var ctx = document.getElementById("chart_hr");
var tabPane = document.getElementById("overview_hr");
var data = {
    labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
    datasets: [
        {
            fill: false,
            data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
            lineTension: 0,
        },
        {
            fill: false,
            data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
            lineTension: 0,
        }
    ]
};
var options = {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            'millisecond': 'DD MMM',
            'second': 'DD MMM',
            'minute': 'DD MMM',
            'hour': 'DD MMM',
            'day': 'DD MMM',
            'week': 'DD MMM',
            'month': 'DD MMM',
            'quarter': 'DD MMM',
            'year': 'DD MMM',
          },
          unitStepSize: 1,
          unit: 'day',
        },
        gridLines : {
            display : false,
        }
      }],
      yAxes: [{
        ticks: {
            min: 50,
            max: 190,
            stepSize: 10,
        }
      }],
    },
};
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Answer 1

, ticks callback autoSkip false. Timescale. , .
.

[ ]

var ctx = document.getElementById("chart_hr");
    function newDate(day, month) {
        return moment().date(day).month(month);
    }


var data = {
    labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
    datasets: [
        {
            fill: false,
            data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
            lineTension: 0,
        },
        {
            fill: false,
            data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
            lineTension: 0,
        }
    ]
};
var options = {
    scales: {
        xAxes: [{
            ticks: {
                autoSkip : false,
                callback: function(value, index, values) {
                    return new moment(value).format('DD MMM');
                }
            },
            gridLines : {
                display : false,
            }
        }],
        yAxes: [{
            ticks: {
                min: 50,
                max: 190,
               stepSize: 10
            }
        }],
    },
};
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});