Как я могу показать относительное расстояние между точками на оси X?

Question

Я пытаюсь использовать ChartJS, чтобы нарисовать диаграмму, показывающую различные состояния (вкл / выкл) устройства в течение определенного периода времени.

Ось X представляет дату и время, а ось Y представляет состояние (1-вкл., 0-выкл.).

Моя единственная проблема заключается в том, что расстояние между двумя последующими точками на оси X является постоянным и не представляет "реального" расстояния между двумя датами.

Например, расстояние между точкой и другой точкой, которая находится на секунду позже, совпадает с расстоянием между точкой и другой точкой, которая находится на день позже.

Вот код:

        var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: [
                new Date("2019-03-31T17:41:02.517839+00:00"),new Date("2019-03-31T17:41:13.969037+00:00"),new Date("2019-03-31T17:41:22.568130+00:00"),new Date("2019-03-31T17:41:23.568130+00:00"),new Date("2019-03-31T17:41:34.010461+00:00"),new Date("2019-03-31T17:41:35.010461+00:00"),new Date("2019-03-31T17:41:55.353745+00:00"),new Date("2019-03-31T17:41:56.353745+00:00"),new Date("2019-03-31T17:42:04.254075+00:00"),new Date("2019-03-31T17:42:05.254075+00:00"),new Date("2019-03-31T17:42:15.552743+00:00"),new Date("2019-03-31T17:42:25.306603+00:00"),new Date("2019-03-31T17:42:26.306603+00:00"),new Date("2019-03-31T17:43:13.747931+00:00"),new Date("2019-03-31T17:43:14.747931+00:00"),new Date("2019-03-31T18:03:46.567253+00:00"),new Date("2019-03-31T18:03:47.567253+00:00"),new Date("2019-03-31T18:30:38.945956+00:00"),new Date("2019-03-31T18:30:39.945956+00:00"),new Date("2019-03-31T18:45:10.718018+00:00"),new Date("2019-03-31T18:45:11.718018+00:00"),new Date("2019-03-31T19:51:24.369067+00:00"),new Date("2019-03-31T19:51:25.369067+00:00"),new Date("2019-03-31T19:53:40.861770+00:00"),new Date("2019-03-31T19:53:41.861770+00:00"),
            ],
            datasets: [{
                label: 'Activity',
                backgroundColor: 'rgba(30,140,50,0.5)',
                borderColor: 'rgba(30,140,50,0.5)',
                data: [
                1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 
]
            }]
        },

        // Configuration options go here
        options: {
            scales: {
                xAxes: [{
                    display: false,
                }],
                yAxes: [{
                    display: false,
                }],
            },
            elements: {
                line: {
                    tension: 0
                }
            },
        }

и вот как это выглядит:

Просто чтобы уточнить - это то, что я хотел получить (созданный с помощью другого модуля - Canvas.js):

Я попытался установить «распределение:« линейный »», но безуспешно.

Не могли бы вы помочь с этим?

Спасибо!