Time series

Date and time series axes automatically handle calendar dates. To create a time series axis, set its type to time:

{
  // ...
  options: {
    scales: {
      xAxes: [
        {
          type: 'time',
        },
      ];
    }
  }
}

In order to use this axis, specify your data as XY coordinates, with X values defining the dates:

// ...
data: [
  {
    x: new Date('1990-10-25'),
    y: 1,
  },
  {
    x: new Date(), // Default to now
    y: 10,
  },
];

You don't have to use a Date object. Strings are converted from most unambiguous date formats using moment.js (Chart.js v2) or Luxon (Chart.js v3+):

// ...
data: [
  {
    x: '25 Oct 1990 06:00',
    y: 1,
  },
  {
    x: '1990-10-26 14:00',
    y: 10,
  },
];

Further configuration is possible by providing a time object to the scale. All parameters below are optional:

Properties of time axes

Name	Description
unit	If set, force the axis unit to be this type. If not set, an appropriate unit will be automatically detected. Supported units: millisecond, second, minute, hour, day, week, month, quarter, year.
minUnit	The minimum unit of time to display.
stepSize	The number of units between gridlines
displayFormats	Customizes how different time units are displayed on the chart. See docs for detail on how to set this object.
isoWeekday	If true, set the first day of the week to Monday. Otherwise, defaults to Sunday
parser	Customizes the parser for datetime values in the data object. See moment.js for valid date string formats (e.g. YYYY MMM D h:mm:ss).
round	If set, dates will be rounded to the start of this unit. See supported time units above.

Example

In this configuration example, we use a custom datetime parser and a custom display:

Chart URL: https://quickchart.io/chart?c={ "type": "line", "data": { "datasets": [ { "label": "Time series example", "fill": false, "data": [ ...

Open in full editor

Learn more

For more advanced usage, learn about Time Cartesian axes.