score:2

Accepted answer

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:

enter image description here

score:2

try this:

scales: {
  xaxes: [{
    type: 'time',
    time: {
      unit: 'minute',
      unitstepsize: 30,
      displayformats: {
         'minute': this.person.use24h ? 'hh:mm' : 'hh:mm a'
      }
    }
  }]
}

score:4

using chart.js v2.9.4, for me this worked:

scales: {
  xaxes: [{
    type: 'time',
    time: {
      displayformats: {hour: 'hh:mm'}
    }
  }]
 }

score:10

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'
    }
 }],

Related Query

More Query from same tag