score:13

time scale works only for x axis.

it can only be placed on the x axis.

but for y you can use a linear scale and express each time as date in milliseconds since 1970-01-01 (how the usual date object does).

plunker or use the following example:

$(function(){
  const ctx = document.getelementbyid('mychart').getcontext('2d');
  
  let years = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"];
  let times = ["11:46:07", "11:41:14", "11:55:26", "12:14:58", "11:54:55", "11:54:04", "12:28:29", "12:35:18"];
  
  let data = years.map((year, index) => ({
    x: moment(`${year}-01-01`), 
    y: moment(`1970-02-01 ${times[index]}`).valueof()
  }));
  
  let bckcolors = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#565452", "#321456", "#129864", "#326812", "#215984"];
  
  let mychart = new chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                label: "time",
                backgroundcolor: 'rgba(188, 229, 214, 0.7)',
                pointbackgroundcolor: bckcolors,
                data: data,
                pointborderwidth: 2,
                pointradius: 5,
                pointhoverradius: 7
            }
        ]
    },
    options: {
        scales: {
            xaxes: [
              {
                type: 'time',
                position: 'bottom',
                time: {
                  displayformats: {
                    years: 'yyyy'
                  },
                  unit: 'year'
                }
              }
            ],
            yaxes: [
              {
                type: 'linear',
                position: 'left',
                ticks: {
                  min: moment('1970-02-01 00:00:00').valueof(),
                  max: moment('1970-02-01 23:59:59').valueof(),
                  stepsize: 3.6e+6,
                  beginatzero: false,
                  callback: value => {
                    let date = moment(value);
                    if(date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                      return null;
                    }
                    
                    return date.format('h a');
                  }
                }
              }
            ]
        }
    }
  });
});
<html>  
  <head>
      <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://npmcdn.com/moment@2.14.1"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
  </head>
  <body>
    <canvas id="mychart" width="500" height="300"></canvas>
  </body>
</html>

explanation

you can have the years on x axis which can be a linear, time or category scale.

in this example x axis is a time scale.

the following code is used to generate values for x and y axis:

  let data = years.map((year, index) => ({
    x: moment(`${year}-01-01`), 
    y: moment(`1970-02-01 ${times[index]}`).valueof()
  }));

for x axis i used moment js to create a date on the first day of the corresponding year.

for y axis i used moment js to create the date in milliseconds since 1970-01-01. in this case all hours are combined with a day to form a date. 1970-02-01 in order to prevent an edge cases that may happen for 1970-01-01. then these milliseconds, since 1970-01-01, are used with the y axis linear scale.

y axis tick.callback is used to format the corresponding milliseconds to an hour. thus using the format h a to obtain for example 1 am, 1 pm, 12 am, 12 pm, ....


Related Query

More Query from same tag