[Chartjs]-Order the Time Units on Y-axis + Chart Js

by

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>

Leave a comment