Have the time on x axes to show the last 24 hours from current time
<p>I am trying to create a bubble chart which shows me data for the <strong>last 24 hours</strong>. I've used a time scale for my <strong>X Axes</strong>. 
The problem I am having is that when the chart is plotted it assumes the time before midnight as the same day and starts the chart from there and plots the points that are supposed to be on the next day outside of the quadrants.</p>

<p>these are my labels</p>

<pre><code>["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"];
</code></pre>

<p>here <strong>15:46</strong> is the time from yesterday and <strong>00:45</strong> is from <strong>today</strong>. so when I plot the points from my data, it should plot the data starting from <strong>15:46</strong> and going on till <strong>13:45</strong> the next day. but it doesn't do it. I even tried giving negative time but it didn't work either.</p>

<p>here is part of the code. the rest is in the JSFiddle</p>

<pre><code> 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: "&lt;%=datasetLabel%&gt; : &lt;%= value %&gt;&lt;%= Chart.mySymbols[window.data.labels.indexOf(label)] %&gt;"
                }, {
                    // 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: "&lt;%=datasetLabel%&gt; : &lt;%= value %&gt;&lt;%= Chart.CompletedTransactionID[1].TransactionID %&gt;"
                }
            ]
        },
        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]]
                    }
                }]
            }
        }
    });
</code></pre>

<p>here's a <a href="http://jsfiddle.net/h42tv3xv/22/" rel="nofollow"><strong>JSFiddle</strong></a> for the same. please let me know if it can be fixed.</p>