有x轴上的时间显示最近24小时从当前时间

我试图创建一个气泡图，显示我的数据过去24小时。我为我的X轴使用了一个时间尺度。我遇到的问题是，当绘制图表时，它假设午夜之前的时间为同一天，并从那里开始绘制图表，并绘制应该在隔天象限之外的点。

这些是我的标签

["15:46", "16:46", "17:46", "18:46", "19:46", "20:46", "21:46", "22:46", "23:46", "00:45", "01:45", "02:45", "03:45", "04:45", "05:45", "06:45", "07:45", "08:45", "09:45", "10:45", "11:45", "12:45", "13:45"];

这里15:46是昨天的时间，00:45是今天的时间。所以当我从我的数据中绘制点时，它应该从15:46开始绘制数据，直到第二天13:45。但它做不到。我甚至试着给消极的时间，但它也不起作用。

是部分代码。其余部分在JSFiddle

 var graph = document.getElementById('graph1');
    var myChart = new Chart(graph, {
        type: 'bubble',
        data: {
            labels: labels,
            datasets: [
                {
                    // pending
                    label: 'Pending',
                    data: pendingBubbles,
                    backgroundColor: 'rgba(255, 90, 94, 0.6)',
                    hoverBackgroundColor: 'rgba(255, 90, 94, 1)',
                    borderColor: 'rgba(255,99,132,1)',
                    fillColor: "rgba(220,220,220,0.0)",
                    strokeColor: "rgba(220,220,220,0)",
                    pointColor: "rgba(220,220,220,0)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    borderWidth: 1,
                    //fill: false,
                    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.mySymbols[window.data.labels.indexOf(label)] %>"
                }, {
                    // completed
                    label: 'Completed',
                    data: completedBubbles,
                    backgroundColor: 'rgba(102, 182, 57, 0.6)',
                    hoverBackgroundColor: 'rgba(102, 182, 57, 1)',
                    borderColor: 'rgba(102, 182, 57,1)',
                    fillColor: "rgba(102,182,57,0.0)",
                    strokeColor: "rgba(102,182,57,0)",
                    pointColor: "rgba(102,182,57,0)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(102,182,57,1)",
                    borderWidth: 1,
                    //fill: false,
                    multiTooltipTemplate: "<%=datasetLabel%> : <%= value %><%= Chart.CompletedTransactionID[1].TransactionID %>"
                }
            ]
        },
        options: {
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            showTooltips: true,
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        format: "HH:mm",
                        unit: 'hour',
                        unitStepSize: 1,
                        displayFormats: {
                            'minute': 'HH:mm',
                            'hour': 'HH:mm'
                        },
                        min: labels[0],
                        max: labels[labels[length - 1]]
                    }
                }]
            }
        }
    });

这里有一个JSFiddle。请告诉我是否可以修复。