Order the Time Units on Y-axis + Chart Js - chart.js

Question

I have time on Y-axis and dates on X-axis. I have built the chart using chart.js and my chart looks as below.
But, as you can see my Y-axis is in reversed order. I don't know how to fix it. Please assist.
Here is my js
var s1 = {
label:'S1',
borderColor: '#33b5e5',
data: [
{ x: '2017-01-06 00:00:00', y: '2017-01-06 04:15:30' },
{ x: '2017-01-07 00:00:00', y: '2017-01-06 07:39:30' },
{ x: '2017-01-08 00:00:00', y: '2017-01-06 06:39:30' },
{ x: '2017-01-09 00:00:00', y: '2017-01-06 08:00:30' },
{ x: '2017-01-10 00:00:00', y: '2017-01-06 05:39:30' },
{ x: '2017-01-11 00:00:00', y: '2017-01-06 09:39:30' },
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1] },
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
weight : 0 ,
time: {
unit:'day'
}
}],
yAxes: [{
type: 'time',
//type: 'linear',
reverse: false,
time: {
unit:'hour'
},
ticks: {
beginAtZero:true
}
}]
}
}
});
chart.canvas.parentNode.style.height = '380px';
chart.canvas.parentNode.style.width = '700px';
Please find the full code snippet in below link.
https://jsfiddle.net/sjabiulla/3d1tpwhy/1/

Answer 1

Chart.js 2.8.0 adds reverse support to time scales, although this doesn't appear to be documented anywhere except the release notes. Move reverse into the tick configuration and it should fix the problem:
yAxes: [{
ticks: {
reverse: true,
...
},
...
}]
Here's a working example:
var s1 = {
label: 'S1',
borderColor: '#33b5e5',
data: [{
x: '2017-01-06 00:00:00',
y: '2017-01-06 04:15:30'
},
{
x: '2017-01-07 00:00:00',
y: '2017-01-06 07:39:30'
},
{
x: '2017-01-08 00:00:00',
y: '2017-01-06 06:39:30'
},
{
x: '2017-01-09 00:00:00',
y: '2017-01-06 08:00:30'
},
{
x: '2017-01-10 00:00:00',
y: '2017-01-06 05:39:30'
},
{
x: '2017-01-11 00:00:00',
y: '2017-01-06 09:39:30'
},
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [s1]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'time',
weight: 0,
time: {
unit: 'day'
}
}],
yAxes: [{
type: 'time',
time: {
unit: 'hour'
},
ticks: {
reverse: true,
beginAtZero: true
}
}]
}
}
});
chart.canvas.parentNode.style.height = '380px';
chart.canvas.parentNode.style.width = '700px';
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>