ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)

TimeChart.settings.timeAxis

This section is defined by the type TimeChartSettingsTimeAxis.

X-axis line representing time at the bottom of chart.

Time line made of two different time graduations. Next image shows time line graduation by days and 3 hours. time axis

As you change the zoom level time axis graduation changes accordingly.

Properties

enabled: boolean
Default value: true

Shows/hides time axis.

keepUnitWhileAnimating: boolean
Default value: false

Whether to change display units while animating

maxRelativeUnitWidth: number
Default value: 0.3333333333333333

Maximum width of a single time axis display unit relative to the screen width. If maxUnitWidth is larger than this factor would allow, then this takes precedence.

maxUnitWidth: number
Default value: 200

Maximum width of a single time axis display unit, in px. If the width is bigger than this, the chart will use a smaller time unit (e.g. switch from minutes to seconds).

Note that this value applies to the whole cluster and not a single series. That is, if you have two columns for each timestamp side by side, both of them have to fit within this limit.

See also
minUnitWidth: number
Default value: 1

Minimum width of a single time axis display unit, in px. If the width is smaller than this, the cgart will switch to bigger time units (e.g. from minutes to hours).

Note that this value applies to the whole cluster and not a single series. That is, if you have two columns for each timestamp side by side, each of them will only have half of this limit available in the worst case.

See also
miniTimeRuler: boolean
Default value: true

Whether to show smallest bars on time axis. It matches with display unit dropdown entry used in time chart toolbar.

padding: number
Default value: 32

Relative amount of padding to add around the text. Remains proportional to text size. 0 results in no padding.

Default results in 44px total padding with text defaults

showHolidays: boolean
Default value: true

Whether to highlight weekends in day view. The highlight only appears if the display unit is hours, days or weeks.

See also

Time axis style

Properties
Version 1.13.0: added line and shadow styles, previously only fillColor was supported.
View section details

Style used to highlight weekends.

Note that this is drawn on top of the series so semi-transparent fill styles should be used.

See also
dateLighten: anonymous type

Tint for lighter blocks of altering shades for time axis. Every second major unit will have this overlay painted on them.

Properties
fillColor: string
Default value: "rgba(0,0,0,0.05)"
majorTimeBalloonStyle: BaseSettingsBackgroundStyle
View section details

Style for major time labels balloons.

majorTimeLabel: BaseSettingsTextStyle
View section details

Style for major time labels.

minorAlign: "center" | "right" | "left"
Default value: "left"
minorTimeBalloonStyle: BaseSettingsBackgroundStyle
View section details

Style for minor time labels balloons.

minorTimeLabel: BaseSettingsTextStyle
View section details

Style for minor time labels.

minorTimeRuler: BaseSettingsLineStyle
View section details

Minor time ruler style.

showMajorTimeBalloons: boolean
Default value: false

Whether to show balloons around major time labels.

showMinorTimeBalloons: boolean
Default value: false

Whether to display minor time labels as balloons instead of ruler style.

View section details

Chart vertical grid settings

timeZone: string
Default value: "UTC"
Introduced in version 1.12.0.

Time zone identifier, for example, UTC or America/Los_Angeles. See time zone support for details.

See also
timeZoneOffset: string | number
Default value: null
deprecated
Version 1.12.0: the property has been deprecated in favor of timeZone.

Time axis time zone offset in minutes.

unitSizePolicy: "auto" | "min" | "max"
Default value: "auto"

Specifies when the chart switches the display unit during up/down scroll and other situations when the most appropriate display unit has to be selected.

Valid values:
  • auto - same as 'max'.
  • min - uses smallest unit that has size >= minUnitWidth; when zooming in, the display unit is switched as soon as the next display can display the time range using the minimum unit width.
  • max - uses largest unit that has size <= maxUnitWidth; when zooming in, the display unit is switched when the current display unit exceeds the maximum unit width.
vgrid: boolean
Default value: true

Whether to show vertical grid.

X