Skip to main content
Version: 5.4

Cartesian Time Axes

The time axis is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.

Here are some example how to create category axes:

// creates a time axis with default scale id "x" and default kind "x" 
CartesianTimeAxis axis1 = new CartesianTimeAxis(chart);

// creates a time axis with scale id "my-axis" and default kind "x"
CartesianTimeAxis axis2 = new CartesianTimeAxis(chart, "my-axis");

// creates a time axis with scale id "my-axis" and default kind "x"
CartesianTimeAxis axis3 = new CartesianTimeAxis(chart, ScaleId.create("my-axis"));

// creates a time axis with default scale id "x" and custom kind "x"
CartesianTimeAxis axis4 = new CartesianTimeAxis(chart, AxisKind.X);

// creates a time axis with scale id "my-axis" and custom kind "x"
CartesianTimeAxis axis5 = new CartesianTimeAxis(chart, "my-axis", AxisKind.X;

// creates a time axis with scale id "my-axis" and custom kind "x"
ScaleId myAxis = ScaleId.create("my-axis");
CartesianTimeAxis axis6 = new CartesianTimeAxis(chart, myAxis, AxisKind.X);

// adds axes to chart configuration
chart.getOptions().setAxes(axis1, ...);

Datasets

To use time axis, you must use DataPoint in order to set the date object in the axis.

The x axis data points can be specified via the setX method when using the time axis.

Here is the example:

// creates a dataset
BarDataset dataset = chart.newDataset();
// creates a datapoint
DataPoint dp1 = new DataPoint();
dp1.setY(number_value1);
dp1.setX(new Date(time1));
// creates a datapoint
DataPoint dp2 = new DataPoint();
dp2.setY(number_value1);
dp2.setX(new Date(time2));
// sets the datapoints to the dataset
dataset.setDataPoints(dp1, dp2);
// sets the datasets to the chart
chart.getData().setDatasets(dataset);

Options

The following options are provided by the time axis.

The time axes are providing the capability to set and get the options, by the set and get methods, as following:

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets and gets the reverse value
axis.setReverse(true);

boolean reverse = axis.isReverse();

The following are the attributes that you can set:

NameTypeScriptableDescription
alignToPixelsbooleanYesAlign pixel values to device pixels.
backgroundColorString - IsColorYesThe background color of scale area.
boundsBoundsYesDetermines the scale bounds on axis.
displayboolean - DisplayYesIf Display.TRUE, the axis is shown.
maxDateYesUser defined maximum date for the scale, overrides maximum value from data.
minDateYesUser defined minimum date for the scale, overrides minimum value from data
offsetbooleanYesIf true, extra space is added to the both edges and the axis is scaled to fit in the chart area.
offsetAfterAutoskipboolean-If true, bar chart offsets are computed with auto skipped ticks.
positionAxisPositionYesPosition of the axis.
reversebooleanYesReverses order of tick labels.
singleStackedboolean-If you might want to stack positive and negative values together.
stackStringYesSets the stack group. Axes at the same position with same stack are stacked.
stackedbooleanYesIf the axis are stacked.
stackWeightdoubleYesSets the weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
weightdoubleYesThe weight used to sort the axis. Higher weights are further away from the chart area.

Scriptable

Scriptable options at scale level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates a category axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets the option by a callback
axis.setBackgroundColor(new ColorCallback<ScaleContext>(){

@Override
public IsColor invoke(ScaleContext context){
// logic
return color;
}
});

The following options can be set by a callback:

NameCallbackReturned types
alignToPixelsAlignToPixelsCallbackboolean
backgroundColorColorCallback<ScaleContext>String - IsColor
boundsBoundsCallbackBounds
displayDisplayCallbackboolean - Display
maxMinMaxCallback<Date>Date
minMinMaxCallback<Date>Date
offsetScaleOffsetCallbackboolean
positionScalePositionCallbackAxisPosition
reverseReverseCallbackboolean
stackStackCallbackString
stackedStackedCallbackboolean
stackWeightScaleWeightCallbackdouble
weightScaleWeightCallbackdouble

Time

The time axis provides a Time object to configure how times must be managed on axis. It provides the set and get methods as following:

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets and gets the unit value
axis.getTime().setUnit(TimeUnit.DAY);
// sets and gets the tooltip format value
axis.getTime().setTooltipFormat(TimeUnit.day.getDefaultFormat());

TimeUnit unit = axis.getTime().getUnit();

The following are the attributes that you can set:

NameTypeDescription
isoWeekdayIsoWeekDayThe first day of the week.
minUnitTimeUnitThe minimum display format to be used for a time unit.
parserStringnull
roundTimeUnitIf defined, dates will be rounded to the start of this unit.
stepSizeintThe number of units between grid lines.
tooltipFormatStringFormat string to use for the tooltip.
unitTimeUnitIf defined, will force the unit to be a certain type.

The following time measurements are supported and are mapped in the TimeUnit enumeration, to force a certain unit:

  • millisecond
  • second
  • minute
  • hour
  • day
  • week
  • month
  • quarter
  • year

The Time object is also providing another object to set the display formats, based on TimeUnit.

The DisplayFormats can be used as following:

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets and gets the unit value
axis.getTime().setUnit(TimeUnit.DAY);
// sets display format for the unit
axis.getTime().getDisplayFormats().setDisplayFormat(TimeUnit.DAY, "MMM D h:mm a");

This method can override the defaults. To see the defaults, see the LUXON date adapter.

Adapters

The adapters options are used to configure the adapter for LUXON date library.

The adapters options configuration is nested in the scale configuration as following:

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(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:

NameTypeDescription
localeCLocaleUsing locale specifying the language to use generating or interpreting strings.
zoneTimeZoneImplementation recognizes the time zone names of the IANA time zone database.
outputCalendarCalendarThe calendar type to use.
numberingSystemNumberingSystemThe numbering system to use.

For more details, have a look how to configure a Luxon date adapters.

Ticks

The time axis provides the following options for configuring tick marks.

// creates a time axis 
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets and gets the color to ticks
axis.getTicks().setColor(HtmlColor.RED);

IsColor color = axis.gteTicks().getColor();

The following are the attributes that you can set:

NameTypeScriptableDescription
alignTickAlign-The tick alignment along the axis.
autoSkipboolean-If true, automatically calculates how many labels that can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
autoSkipPaddingint-The padding between the ticks on the horizontal axis when autoSkip is enabled.
backdropColorString - IsColorYesColor of label backdrops.
backdropPaddingPadding-The padding of tick backdrop.
See padding documentation for more details.
colorString - IsColorYesColor of ticks.
See default colors.
crossAlignCrossAlignCrossAlign.NEARThe tick alignment perpendicular to the axis.
displayboolean-If true, the tick marks are shown.
fontIsFontYesFont of ticks.
See Font.
includeBoundsboolean-If true, the defined min and max values should be presented as ticks even if they are not "nice".
labelOffsetint-Distance in pixels to offset the label from the centre point of the tick (in the x-direction for the x-axis, and the y-direction for the y-axis).

Note: This can cause labels at the edges to be cropped by the edge of the canvas.
maxRotationint-The maximum rotation for tick labels when rotating to condense labels.

Note: Rotation doesn't occur until necessary and only applicable to horizontal scales.
minRotationint-The minimum rotation for tick labels.
mirrorboolean-The flips tick labels around axis, displaying the labels inside the chart instead of outside.

Note: Only applicable to vertical scales.
paddingint-The padding between the tick label and the axis.
sampleSizeint-The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
showLabelBackdropbooleanYesIf true, draw a background behind the tick labels
sourceTickSource-How ticks are generated on axis time.
textStrokeColorString - IsColorYesThe color of the stroke around the text.
textStrokeWidthintYesStroke width around the text.
zint-z-index of tick layer. Useful when ticks are drawn on chart area. Values less than or equals to 0 are drawn under data sets, greater than 0 on top.

The further customization of ticks, a callback is provided.

Ticks scriptable options

Scriptable options at ticks level accept a callback which is called for each of the underlying data values. See more details in Configuring charts section.

All scriptable options callbacks will get a ScaleContext instance.

// creates the axis for chart
CartesianTimeAxis axis = new CartesianTimeAxis(chart);
// sets the option by a callback
axis.getTicks().setColor(new ColorCallback<ScaleContext>(){

@Override
public IsColor invoke(ScaleContext context){
// logic
return color;
}
});

The following options can be set by a callback:

NameCallbackReturned types
backdropColorColorCallback<ScaleContext>String - IsColor
colorColorCallback<ScaleContext>String - IsColor
fontFontCallback<ScaleContext>FontItem
showLabelBackdropShowLabelBackdropCallbackboolean
textStrokeColorColorCallback<ScaleContext>String - IsColor
textStrokeWidthWidthCallback<ScaleContext>int

Callback

It is also common to want to change the tick marks to include information about the data type.

To apply a custom callback, you can set a TimeTickCallback instance to the axis options, as following:

axis.getTicks().setCallback(new TimeTickCallback(){

private final DateTimeFormat dateTimeFormat = new DateTimeFormat(CLocale.GERMANY);

/**
* Changes the tick marks to include information about the data type.
*
* @param axis axis instance where this callback as been defined
* @param value value of tick as date
* @param label label of tick, passed by CHART.JS formatting the date by the selected {@link TimeUnit} and its display
* format.
* @param index index of tick
* @param values list of all tick values
* @return the tick to apply or if the callback returns null the associated grid line will be hidden.
*/
public String onCallback(Axis axis, Date value, String label, int index, List<TimeTickItem> values){
return dateTimeFormat.format(value);
}

});

The callback is providing a specific list of items (TimeTickItem) which maps Chart.JS object with the values (as date) and major booleans.

See INTL date time format documentation if you want to use a date formatter, provided out-of-the-box.

The callback can return a string (for single line) or a list of strings (for multiple lines).