How to format x-axis time scale values in Chart.js v2

chart.js

chart.js Problem Overview


I am able to format the tooltips when I hover over a datapoint on a line chart via options.scales.xAxes.time.tooltipFormat, but I can't seem to do it for the x-axis tick lables. My data.labels is an array of moment objects. They display as "MMM DD, YYYY" (e.g. Feb 23, 2012), but I want to drop the year.

chart.js Solutions


Solution 1 - chart.js

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/

Solution 2 - chart.js

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'}); 
    },
},

Solution 3 - chart.js

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";
}

Solution 4 - chart.js

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwetjoshView Question on Stackoverflow
Solution 1 - chart.jspotatopeelingsView Answer on Stackoverflow
Solution 2 - chart.jsMoustafa ShamaView Answer on Stackoverflow
Solution 3 - chart.jsRob RaymondView Answer on Stackoverflow
Solution 4 - chart.jsshafeerambattView Answer on Stackoverflow