[Chartjs]-How to define chart.js time scale date formats

by

7👍

✅

If you are trying to format the data tbat appears in the point hover tooltip, then when using a time scale, you can use the tooltipFormat property to set the moment js format string to use for the tooltip.

scales: {
  xAxes: [{
    type: 'time',
    position: 'bottom',
    time: {
      tooltipFormat: "MM-DD-YYYY",
    },
  }],
}

If however you are trying to set the format of the x axis tick labels so that it only shows the day portion of the date, then you can use the unit property.

scales: {
  xAxes: [{
    type: 'time',
    position: 'bottom',
    time: {
      unit: "day",
    },
  }],
}

The above example uses the default display format defined for day which is ‘ll’ (eg. Sep 4 1986). If you want to change this format to something else (eg. 09/04/1986), then you can re-define the day display format like this.

scales: {
  xAxes: [{
    type: 'time',
    position: 'bottom',
    time: {
      unit: "day",
      displayFormats: {
        day: "l",
      },
    },
  }],
}

Leave a comment