scales/time

31 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Time scale internal format

Internally, the time scale uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970, UTC). Chart.js also supports all formats that your chosen date adapter accepts. Using timestamps with parsing: false provides better performance.

Time units supported

The following time measurements are supported and can be passed as strings to the time.unit config option: 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.

Time scale requires date adapter

The time scale requires both a date library and a corresponding adapter to be present. You must choose from the available adapters.

Change scale type example

To change a time scale to logarithmic: Initial config: const chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { type: 'time', } } } }); Scale update: chart.options.scales.x = { type: 'logarithmic', bounds: 'ticks' };

Migrate from time scale to logarithmic or linear scale

When changing the scale type from Time scale to Logarithmic/Linear scale, you must add bounds: 'ticks' to the scale options. This is necessary because the default value of bounds is 'data' for the Time scale, but logarithmic and linear scales require 'ticks'.

Min max time scale example

To set a time scale to start at 7 November 2021: let chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [{ x: '2021-11-06 23:39:30', y: 50 }, { x: '2021-11-07 01:00:28', y: 60 }, { x: '2021-11-07 09:00:28', y: 20 }] }], }, options: { scales: { x: { min: '2021-11-07 00:00:00', } } } });

Min and max configuration for time scale

For the min and max properties on a time scale, the value must be either a string that is parsable by your date adapter or a number with the amount of milliseconds elapsed since UNIX epoch.

Time scale parser option

The time.parser property can be defined as a string (interpreted as a custom format to be used by the date adapter to parse the date) or as a function (must return a type that can be handled by your date adapter's parse method).

Ticks source values

The ticks.source property controls tick generation with three values: 'auto' generates optimal ticks based on scale size and time options; 'data' generates ticks from data including labels from data {x|y} objects; 'labels' generates ticks from user given labels ONLY.

Set display format for time unit example

To set the display format for the quarter unit to show the month and year: const chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { type: 'time', time: { displayFormats: { quarter: 'MMM YYYY' } } } } } });

Display formats for time units

You can specify a map of display formats with a key for each time unit: millisecond, second, minute, hour, day, week, month, quarter, year. The format string used as a value depends on the date adapter you chose to use.

Force time unit example

To force a time scale to always display units per month, use this configuration: const chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { type: 'time', time: { unit: 'month' } } } } });

RequireJS nested requires for time scale

RequireJS example for time scale: require(['chartjs'], function(Chart) { require(['moment'], function() { require(['chartjs-adapter-moment'], function() { new Chart(ctx, {...}); }); }); });

Time scale requires date adapter

To use the time scale, a date adapter (one of the available adapters from the awesome list) and its corresponding date library must be fully loaded after Chart.js. In RequireJS, use nested requires to load Chart.js first, then the date library, then the date adapter.

Time and timeseries scales use ticks.stepSize instead of time.stepSize

In Chart.js 4.0, time and timeseries scales use ticks.stepSize instead of time.stepSize, which has been removed.

Time scale ticks callback now receives timestamp

In Chart.js 4.0, the ticks callback on the time scale now receives a timestamp instead of a formatted label.

Time scale configuration with offset and data source

The time scale can be configured with offset set to true and ticks source set to 'data'. The offset property adds padding at the edges of the scale. The ticks source property set to 'data' means tick positions are determined from the data labels rather than automatically calculated.

Time scale with combo chart example

A mixed chart example showing a combo chart (mixing bar and line chart types) with a time scale on the x-axis. The chart uses a line chart as the base type with two bar datasets and one line dataset. The x-axis is configured with type 'time', display true, offset true, ticks source set to 'data', and time unit set to 'day'. The chart has 7 data points generated using Utils.newDate(i) to create date labels.

Time scale unit configuration

The time scale accepts a time object with a unit property that specifies the time unit for the axis. In the example, the unit is set to 'day'.

Time scale example with major tick formatting

Example showing a time scale with major tick support: the ticks.font callback checks if context.tick && context.tick.major is true, and if so, returns {weight: 'bold'} to make major ticks bold. The ticks.autoSkip is set to false and maxRotation to 0.

Time scale ticks major tick styling

The time scale ticks configuration supports a major object with an enabled property to enable or disable major ticks. When major ticks are enabled, context.tick.major is set to true, allowing conditional styling of major ticks via the font or color callbacks.

Time scale with date objects and string dates

A time scale can accept both date objects created with Utils.newDate() and string date representations created with Utils.newDateString() in the same dataset. Both formats are valid for time scale data points.

Time scale tooltipFormat configuration with Luxon

The time scale accepts a 'time' property in the scale configuration with a tooltipFormat option. The tooltipFormat uses Luxon format strings to control how dates are displayed in tooltips. Example: time: { tooltipFormat: 'DD T' } formats tooltips using Luxon's DD T format.

Time scale setup with Date objects in labels

A time scale can be configured by setting the scale type to 'time' in the scales configuration. Chart labels should contain Date objects or date strings. The example uses Utils.newDate() to generate Date objects for labels: [Utils.newDate(0), Utils.newDate(1), Utils.newDate(2), etc.].

Time scale with point data objects

Datasets on a time scale can contain point data objects with x and y properties, where x contains a date string (created with Utils.newDateString()) or Date object and y contains the numeric value. Example: data: [{ x: Utils.newDateString(0), y: Utils.rand(0, 100) }, ...]

autoSkip enabled by default in time scale in v3

In Chart.js 3.x, `autoSkip` is now enabled by default for the time scale for consistency with other scales.

TimeScale property read changed in v3

In Chart.js 3.x, the `TimeScale` no longer reads `t` from object data by default. The default property is `x` or `y`, depending on the orientation.

Time scale min/max moved in v3

In Chart.js 3.x, the `scales.xAxes.time.max` and `scales.xAxes.time.min` options were renamed to `scales[id].max` and `scales[id].min` respectively.

Time scale format renamed to parser in v3

In Chart.js 3.x, the `scales.xAxes.time.format` option was renamed to `scales[id].time.parser`.

moment dependency removed in v3

The `moment` library is no longer specified as an npm dependency in Chart.js 3.x. If using the `time` or `timeseries` scales, you must include one of the available adapters and corresponding date library.

timeseries scale type added in v3

In Chart.js 3.x, the time scale option `distribution: 'series'` was removed. A new scale type `timeseries` was introduced to replace this functionality.

Give your agent this brain