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.

Name	Default	Example
millisecond	h:mm:ss.SSS a	7:26:39.413 PM
second	h:mm:ss a	7:26:39 PM
minute	h:mm a	7:26 PM
hour	ha	7PM
day	MMM d	Feb 19
week	W yyyy	8 2020
month	MMM yyyy	Feb 2020
quarter	'Q'q - yyyy	Q1 - 2020
year	yyyy	2020

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:

Name	Type	Default	Description
locale	CLocale	null	Using locale specifying the language to use generating or interpreting strings.
zone	TimeZone	null	Implementation recognizes the time zone names of the IANA time zone database.
outputCalendar	Calendar	null	The calendar type to use.
numberingSystem	NumberingSystem	null	The 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");
    }
});