Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis

Question

I have a .Net Core application in which I am drawing a graph showing values for some measurements during the time of the day.

My "time" object is in Unix time, with milliseconds (e.g. 1502258405000). I have managed to convert it to a time object manually as follows:

var datetimes = $.map(data, function (value, index) {
    var datetime = new Date(value.timestamp);
    var iso = datetime.toISOString().match(/(\d{4}\-\d{2}\-\d{2})T(\d{2}:\d{2}:\d{2})/);
    return iso[2]; //Returns HH:MM:SS
});

However with this conversion my chart.js chart doesn't understand the time objects as time, which means (if there is a gap in the measurements) it won't show (and there is), as it will just put the measurements next to each other and handle them as strings.

I am not interested in showing the date as the data always will be collected within a known date. I changed my above implementation to:

var datetimes = $.map(gpsData, function (value, index) {
    return new Date(value.timestamp);
});

However when I plot this on my chart.js line chart it makes my chart show AM/PM values which is not desired, as seen here above. I want to have a 24 hour clock. I used the chart.js time value for the xAxis as seen here below to plot the values as seen in the picture above:

options: {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                format: "HH:MM:SS",
                min: minTime, //calculated above in my implementation
                max: maxTime  //same as above
            }
        }]
    }
}

However the values are not formatted as my desired output. So I was wondering what the proper way of adding time of day to the x axis on my graph using chart.js is or even how to format it my desired values?

Answer 1

Actually this is supported (at least in recent versions of chartjs).

It seems like you have to specify the format for all the different formats that chartjs can display.

Check: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#display-formats

In my project the following works for me:

 xAxes: [{
    type: 'time',
    time: {
        parser: timeFormat,
        // round: 'day'                                                                                                                                                                            
        tooltipFormat: 'YYYY-MM-DD HH:mm',
        displayFormats: {
            millisecond: 'HH:mm:ss.SSS',
            second: 'HH:mm:ss',
            minute: 'HH:mm',
            hour: 'HH'
        }
    },
    display: true,
    scaleLabel: {
        display: true,
        labelString: 'Time'
    }
 }],