Skip to main content
Version: 5.7

Date adapters

The Chart.JS time and time series scale requires both a date library and corresponding adapter to be present.

Chart.JS is providing the integration with 3 date libraries, but Charba is implementing the integration with Luxon date library. The adoption of Luxon is justified because is completely based on Intl API.

See Charba enabling documentation to have more details how to embed or not Luxon date library.

Luxon

Luxon is a powerful, modern, and friendly wrapper for java-script dates and times.

Luxon uses the native Intl API to provide easy-to-use internationalization.

These are the defaults that the library implements that you can change in the cartesian time axis.

NameDefaultExample
millisecondh:mm:ss.SSS a7:26:39.413 PM
secondh:mm:ss a7:26:39 PM
minuteh:mm a7:26 PM
hourha7PM
dayMMM dFeb 19
weekW yyyy8 2020
monthMMM yyyyFeb 2020
quarter'Q'q - yyyyQ1 - 2020
yearyyyy2020

To see all available formats, have a look here in the Luxon documentation.

Luxon can be configured in order to update some behavior during parsing, formatting and date management.

The Luxon options can be used as following:

// creates a time series axis 
CartesianTimeSeriesAxis axis = new CartesianTimeSeriesAxis(chart);
// sets and gets the locale to date adapter options
axis.getAdapters().getDate().setLocale(CLocale.US);

CLocale locale = axis.getAdapters().getDate().getLocale();

The following are the attributes that you can set:

NameTypeDefaultDescription
localeCLocalenullUsing locale specifying the language to use generating or interpreting strings.
zoneTimeZonenullImplementation recognizes the time zone names of the IANA time zone database.
outputCalendarCalendarnullThe calendar type to use.
numberingSystemNumberingSystemnullThe numbering system to use.

For more details, have a look how to configure time axes adapters and the INTL locale documentation.

Using the date adapter

Charba enables the possibility to get a date adapter instance from Chart.JS which can provides some capabilities, like formatting, parsing and date operations.

Here is an example how to use a date adapter to format ticks by callback:

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets tick callback
axis.getTicks().setCallback(new TimeTickCallback(){

private DateAdapter adapter = new DateAdapter();

@Override
public String onCallback(Axis axis, Date value, String label, int index, List<TimeTickItem> values){
return adapter.format(value, "yyyy");
}
});