score:0

you could format the dates before you add them to your array. that is how i did. i used angularjs

//convert the date to a standard format
var dt = new date(date);
//take only the date and month and push them to your label array

$rootscope.charts.mainchart.labels.push(dt.getdate() + "-" + (dt.getmonth() + 1));

use this array in your chart presentation

score:2

i had a different use case, i want different formats based how long between start and end time of data in graph. i found this to be simplest approach

let xaxes = {
    type: "time",
    time: {
        displayformats: {
            hour: "ha"
        }
    },
    display: true,
    ticks: {
        reverse: true
    },
    gridlines: { display: false }
}
// if more than two days between start and end of data,  set format to show date,  not hrs
if ((parseint(cookies.get("epoch_max")) - parseint(cookies.get("epoch_min"))) > (1000 * 60 * 60 * 24 * 2)) {
    xaxes.time.displayformats.hour = "mmm d";
}

score:25

as per the chart js documentation page tick configuration section. you can format the value of each tick using the callback function. for example i wanted to change locale of displayed dates to be always german. in the ticks parts of the axis options

ticks: {
    callback: function(value) { 
        return new date(value).tolocaledatestring('de-de', {month:'short', year:'numeric'}); 
    },
},

score:101

just set all the selected time unit's displayformat to mmm dd

options: {
  scales: {
    xaxes: [{
      type: 'time',
      time: {
        displayformats: {
           'millisecond': 'mmm dd',
           'second': 'mmm dd',
           'minute': 'mmm dd',
           'hour': 'mmm dd',
           'day': 'mmm dd',
           'week': 'mmm dd',
           'month': 'mmm dd',
           'quarter': 'mmm dd',
           'year': 'mmm dd',
        }
        ...

notice that i've set all the unit's display format to mmm dd. a better way, if you have control over the range of your data and the chart size, would be force a unit, like so

options: {
  scales: {
    xaxes: [{
      type: 'time',
      time: {
        unit: 'day',
        unitstepsize: 1,
        displayformats: {
           'day': 'mmm dd'
        }
        ...

fiddle - http://jsfiddle.net/prfd1m8q/


Related Query