Using Chart.js with Dates as x-Axis labels

<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
    <meta charset="utf-8" />
</head>

<body>

    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <script>
        var date0 = new Date((new Date()).getTime() - 50000);
        var date1 = new Date();
        var date2 = new Date((new Date()).getTime() + 50000);

        var chartData = {
            type: 'line',
            data: {
                datasets: [{
                    label: 'A label',
                    backgroundColor: 'rgb(255,0,0)',
                    borderColor: 'rgb(255,0,0)',
                    data: [
                        { x: date0, y: 10 },
                        { x: date1, y: 11 },
                        { x: date2, y: 15 }
                    ],
                    fill: false,
                    yAxisID: 'y-axis-1',
                }]
            },
            options: {
                responsive: true,
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'second'
                        }
                    }],
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        position: 'left',
                        id: 'y-axis-1',
                    }]
                }
            }
        }

        window.onload = function () {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, chartData);
        };

    </script>
</body>

</html>