Chart.Js Showing Time (Hh:Mm:Ss - 24 Hour Clock) on Xaxis

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

I found that this wasn't possible for Chart.js so I moved to Highcharts.js instead, which supports this functionality.

Here below is my code for the solution:

function tripSpeedsLineGraph() {
    var gpsData = @Html.Raw(Json.Serialize(Model.gpsData));

    chartData = []
    var reqData = $.map(gpsData, function (value, index) {
         chartData.push([new Date(value.timestamp), value.sp]);
    });

    var chart = Highcharts.chart('tripSpeedsLineChart', {
        chart: {
            type: 'spline',
            zoomType: 'x',
            panning: true,
            panKey: 'shift'
        },
        title: {
            text: "Speed during trip"
        },
        subtitle: {
            text: 'Click and drag to zoom in. Hold down shift key to pan.'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%b %H:%M:%S'
            },
            title: {
                text: 'Time of day'
            }
        },
        yAxis: {
            title: {
                text: 'Speed'
            },
            min: 0
        },
        tooltip: {
            crosshairs: [true],
            formatter: function () {
                return "Datetime: " + moment.utc(moment.unix(this.x/1000)).format("DD/MM-YYYY HH:mm:ss") + "<br> Speed: " + this.y;
            }
        },
        series: [{
            name: 'Speed Data',
            data: chartData
        }]
    });
}

And the final result looks like this:

Sample Image

time series stream, removing am/pm on x axis and 24 hour format

The Chart.js docs you linked to specify this structure for formatting time axes labels:

time: {
    displayFormats: {
        quarter: 'MMM YYYY'
    }
}

so plugging in your format that becomes:

time: {
    displayFormats: {
        second: this.timeFormat
    }
}

You were right, just a tiny detail! (updated Fiddle).

ChartJS xAxis time formats don't change for days

It is possible to coerce the units you want the xAxis to use using the unit property. For example, if you wanted it to show it in terms of days instead of hours you can use a config like:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MMM DD' 
                    }
                }
            }]
        }
    }
});

An alternative would be to use minUnit instead of unit. This will ensure your graph scales up better as it will limit the lowest display format to use while still being flexible to use larger formats if needed.

With regard to your overlapping labels problem, tweaking the unitStepSize property might help.

More information in the Time Units Section of ChartJS docs

hh:mm in chart.js on X-axis and text labels on the Y-axis

ꜰɪʀꜱᴛ

parse the labels and data as follows :

var labels = result.map(e => e.y);
var data = result.map(e => moment(e.x, 'HH:mm'));

ꜱᴇᴄᴏɴᴅ

use yLabels property instead of labels (inside data object), as such :

...
data: {
      yLabels: labels,
      ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var result = [{ x: "150:00", y: "bar 1" }, { x: "19:00", y: "bar 2" }, { x: "20:00", y: "bar 3" }, { x: "22:00", y: "bar 4" }];
// parse labels and datavar labels = result.map(e => e.y);var data = result.map(e => moment(e.x, 'HH:mm'));
var ctx = document.getElementById("MeSeStatusCanvas").getContext('2d');var myChart = new Chart(ctx, {   type: 'horizontalBar',   data: {      yLabels: labels,      datasets: [{         label: 'Voltage Fluctuation',         data: data,         borderWidth: 1      }]   },   options: {      scales: {         xAxes: [{            type: 'time',            time: {               unit: 'hour',               displayFormats: {                  hour: 'HH:mm'               },               /* (required to show first bar)                set min prop, less than the minimum value of data.                in this case minimum data value is '15:00', so we set '14:00'                */               min: moment('14:00', 'HH:mm')            }         }]      }   }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script><canvas id="MeSeStatusCanvas"></canvas>

How to display date as label on x-axis in chart.js

If I have understood you correctly then you just want the x-axis to be a date so 2018-12-07 15:45:17. I have managed to get that. Here is the entire code I have. Haven't used chart.js before and haven't got much time to look properly but look at the displayFormats and change how you want. Hope this helps.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>

<body>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
$(document).ready(function(){
        var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
        var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];


        //console.log(time_Array);
        //console.log(meas_value_Array);

        var ctx = document.getElementById ('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
        labels: time_Array,
        datasets: [{
        label: 'Humidity',
        data: meas_value_Array,
        backgroundColor: "rgba(255,153,0,0.4)"
        }]
        },

            options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        unit: 'minute',
                        displayFormats: {
                            'minute': 'YYYY-MM-DD HH:mm:ss',
                            'hour': 'YYYY-MM-DD HH:mm:ss'
                        }
                    },
                    ticks: {
                        source: 'data'
                    }
                }]                    
            }
        }
    });
});
</script>

</body>
</html>

Making y axis of highcharts in time format hh:mm

So here is the answer that I've got if anyone need it (here is the link to jsfiddle).

I set the time variables in ms:

data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]

And then I format this value as I need:

yAxis: {
            title: {
                text: 'Time (hh:mm)'
            },
            labels: {
                formatter: function () {
                    var time = this.value;
                    var hours1=parseInt(time/3600000);
                    var mins1=parseInt((parseInt(time%3600000))/60000);
                    return hours1 + ':' + mins1;
                }
            }
        }

That's the only way I found to make y axis in pure hh:mm format. Also you can make the data not in ms, but in w/e you want or need.

Chart.Js Showing Time (Hh:Mm:Ss - 24 Hour Clock) on Xaxis