Skip to content
amCharts 5

CategoryDateAxis

Type class

A category axis whose categories are timestamps. Each data item takes an equal share of the axis, so periods without data leave no gaps.

More info: Category date axis

Data item

CategoryDateAxis uses data items of type ICategoryDateAxisDataItem.

Sources

CategoryDateAxis can be used (imported) via one of the following packages.

// Import CategoryDateAxis
import * as am5xy from "@amcharts/amcharts5/xy";


// Create CategoryDateAxis
am5xy.CategoryDateAxis.new(root, {
  // ... config if applicable
});

Inheritance

CategoryDateAxis extends CategoryAxis.

CategoryDateAxis is not extended by any other symbol.

Settings

Set these settings on a CategoryDateAxis object using its set() and setAll() methods. Read about settings concept.

baseInterval

Type ITimeInterval

The time interval of the data, such as { timeUnit: "day", count: 1 } for daily data.

More info: Date axis: data granularity

dateFormats

Type undefined | object

Date formats for labels, by the time unit of the grid, such as "day".

More info: Date axis: date formats

gridIntervals

Type Array

Intervals the grid and labels can be placed at, from shortest to longest. The axis uses the shortest that keeps grid lines at least minGridDistance apart.

More info: Date axis: grid granularity

markUnitChange

Type undefined | false | trueDefault true

Formats labels where a new period begins, such as the first day of a month, with periodChangeDateFormats instead of dateFormats.

periodChangeDateFormats

Type undefined | object

Date formats, by time unit, for labels where a new period begins (see markUnitChange).

More info: Date axis: date formats

tooltipDateFormat

Type undefined | string

Date format for the axis tooltip. If not set, the one in dateFormats for the time unit of baseInterval is used.

More info: Formatting dates

124 inherited items
active

Type undefined | false | trueInherited from ISpriteSettings

Applies the element's "active" state while true.

animations

Type ArrayInherited from IEntitySettingsSince 5.20.8

Animations the element plays on its own, described as data - so they can be set from a JSON config and saved with it.

Each one animates a setting of the element (or, with target: "dataItem", a value of its data item - a map point's positionOnLine, say). They start when the setting is applied, restart when it changes, and stop when the element is disposed. A saved config keeps what was configured, never a value caught half way through an animation.

sprite.set("animations", [
  { key: "rotation", to: 360, duration: 4000, loops: 0 },
  { key: "scale", from: 1, to: 1.3, duration: 800, loops: 0, yoyo: true, easing: "sine" }
]);
appearDelay

Type undefined | numberDefault 0Inherited from ISpriteSettingsSince 5.21.0

Milliseconds to wait before the autoAppear animation starts. The element stays hidden until then.

appearDuration

Type undefined | numberInherited from ISpriteSettingsSince 5.21.0

Duration of the autoAppear animation, in milliseconds. Without it, the element's stateAnimationDuration is used.

ariaChecked

Type undefined | false | trueInherited from ISpriteSettings

aria-checked setting.

This setting is ignored unless role is one of the following:

  • "checkbox"

  • "option"

  • "radio"

  • "menuitemcheckbox"

  • "menuitemradio"

  • "treeitem" On a toggle "button" (one with toggleKey) it is exposed as aria-pressed.

ariaControls

Type undefined | stringInherited from ISpriteSettings

aria-controls setting.

ariaCurrent

Type undefined | stringInherited from ISpriteSettingsSince 5.9.8

aria-current setting.

More info: https://w3c.github.io/aria/#aria-current

ariaExpanded

Type undefined | false | trueInherited from ISpriteSettingsSince 5.21.0

aria-expanded setting: whether the content the element shows or hides (e.g. a task's subtasks, a node's children) is shown.

More info: https://w3c.github.io/aria/#aria-expanded

ariaHidden

Type undefined | false | trueInherited from ISpriteSettings

aria-hidden setting.

ariaLabel

Type undefined | stringInherited from ISpriteSettings

Label for the element to use for screen readers.

More info: Accessibility: screen reader

ariaLive

Type AriaLiveInherited from ISpriteSettings

aria-live setting.

ariaOrientation

Type undefined | stringInherited from ISpriteSettings

aria-orientation setting.

ariaSelected

Type undefined | false | trueInherited from ISpriteSettingsSince 5.9.8

aria-selected setting.

More info: https://w3c.github.io/aria/#aria-selected

ariaValueMax

Type undefined | stringInherited from ISpriteSettings

aria-valuemax setting.

ariaValueMin

Type undefined | stringInherited from ISpriteSettings

aria-valuemin setting.

ariaValueNow

Type undefined | stringInherited from ISpriteSettings

aria-valuenow setting.

ariaValueText

Type undefined | stringInherited from ISpriteSettings

aria-valuetext setting.

autoAppear

Type undefined | false | trueDefault falseInherited from ISpriteSettingsSince 5.21.0

Plays the element's reveal animation, as appear() does, when it is first drawn: a chart fades in, a series grows its columns or lines from the base. A series waits for its first data. It plays once: data updates do not replay it, but turning the setting off and on again does.

Elements made from a template play as each one is made.

An element that starts hidden (visible: false, or hidden in code before it is drawn) stays hidden. An animations entry on the same setting, such as a pulsing opacity, keeps playing.

This is how a JSON config gets the opening animation, as a config cannot call appear().

chart.setAll({ autoAppear: true, appearDuration: 1000, appearDelay: 100 });
series.setAll({ autoAppear: true, appearDuration: 1000 });

chart.setAll({ autoAppear: true, appearDuration: 1000, appearDelay: 100 });
series.setAll({ autoAppear: true, appearDuration: 1000 });

More info: Animations

background

Type GraphicsInherited from IContainerSettings

Element drawn behind the container's content, sized to fill the container.

More info: Containers: background

baseValue

Type undefined | numberInherited from IAxisSettings

Base value of the axis.

blur

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Blur radius in pixels, from 0 (no blur) up.

IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

brightness

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Brightness.

  • 0 - completely black

  • 1 - no changes (default)

  • >1 - brighter IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

bullet

Type undefined | (root: Root, axis: Axis, dataItem: DataItem) => AxisBulletInherited from IAxisSettings

Function that creates an AxisBullet for each of the axis's cells, such as each category. Axis ranges get none.

More info: Axes: axis bullets

categoryField

Type stringInherited from ICategoryAxisSettings

Field in the data that holds the category names.

cellSizeField

Type undefined | stringInherited from ICategoryAxisSettings

Field in the data that holds each category's relative size: a category of 2 takes twice the room of one of 1. Categories without it get 1.

centerX

Type number | PercentInherited from ISpriteSettings

The point of the element that is placed at its x position, and that it rotates and scales around: pixels from its left edge, or a percent of its width.

centerY

Type number | PercentInherited from ISpriteSettings

The point of the element that is placed at its y position, and that it rotates and scales around: pixels from its top edge, or a percent of its height.

clickAnnounceText

Type undefined | stringInherited from ISpriteSettingsSince 5.10.8

If set, the text will be read out (announced) by a screen reader when focused element is "clicked" (by pressing ENTER or SPACE).

contrast

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Contrast.

  • 0 - completely gray

  • 1 - no changes (default)

  • >1 - more contrast IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

crisp

Type undefined | false | trueDefault falseInherited from ISpriteSettingsSince 5.3.0

Draws the element sharply, with minimal anti-aliasing: its position is rounded to whole pixels, and strokeWidth is adjusted to the device pixel ratio, so lines may look thinner than expected.

NOTE: it may not work well on several elements that are meant to fit together exactly.

cursorOverStyle

Type undefined | stringInherited from ISpriteSettings

CSS cursor to show while the pointer is over the element, e.g.

"pointer".

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

dateFormatter

Type DateFormatter | undefinedInherited from ISpriteSettings

A DateFormatter to use for this element instead of the root's.

More info: /v5/concepts/using-formatters/

disabled

Type undefined | false | trueInherited from ISpriteSettings

Applies the element's "disabled" state while true. It changes only the look: the element still responds to the pointer.

draggable

Type undefined | false | trueInherited from ISpriteSettings

Lets the user drag the element. Touches that start on it no longer scroll the page.

durationFormatter

Type DurationFormatter | undefinedInherited from ISpriteSettings

A DurationFormatter to use for this element instead of the root's.

More info: /v5/concepts/using-formatters/

dx

Type undefined | numberInherited from ISpriteSettings

Horizontal shift in pixels. Can be negative to shift leftward.

dy

Type undefined | numberInherited from ISpriteSettings

Vertical shift in pixels. Can be negative to shift upward.

end

Type undefined | numberDefault 1Inherited from IAxisSettings

End of the visible (zoomed) part of the axis: 0 is the start of the axis, 1 the end. Set it to pre-zoom: 0.9 hides the last 10%.

More info: Zoom and pan: pre zooming axes

endLocation

Type undefined | numberDefault 1Inherited from ICategoryAxisSettings

Where within the last category the axis ends, from 0 (its start) to 1 (its end): 0.5 cuts off the second half of the last category.

exportable

Type undefined | false | trueInherited from ISpriteSettings

If false, the element is left out of exported images of the chart.

fillRule

Type undefined | (dataItem: DataItem, index: undefined | number) => voidInherited from ICategoryAxisSettings

Function that decides which axis fills show; it is called for each category with its index. The default fills every other category.

More info: Axes: axis fills

fixAxisSize

Type undefined | false | trueDefault trueInherited from IAxisSettings

Keeps the axis from shrinking as zooming changes the visible labels: it keeps room for the widest label shown so far.

focusable

Type undefined | false | trueInherited from ISpriteSettings

Can element be focused, i.e. selected using TAB key.

More info: Accessibility: focusing elements

focusableGroup

Type string | numberInherited from ISpriteSettingsSince 5.0.6

An identifier by which to group common elements into focusable groups.

If set, only the first element in he group will be focusable via TAB key.

When it is selected, the rest of the elements in the same group can be selected using arrow keys.

It allows users to TAB-through chart elements quickly without the need to TAB into each and every element.

It's up to implementer of the charts to provide meaningful ariaLabel to the element, which advertises this capability and provides adequate instructions.

More info: Accessibility: grouping focusable elements

forceHidden

Type undefined | false | trueInherited from ISpriteSettings

Hides the element whatever its visible setting, even when show() is called.

forceInactive

Type undefined | false | trueInherited from ISpriteSettingsSince 5.0.21

Makes the element and its children ignore the pointer, even with interactive: true or event listeners set.

height

Type number | Percent | nullInherited from ISpriteSettings

Height in pixels, or a Percent of the parent's inner height. In a vertical layout, a percent height is a share of the height the other children leave.

hoverOnFocus

Type undefined | false | trueInherited from ISpriteSettings

Simulate hover on an element when it gains focus, including changing hover appearance and displaying a tooltip if applicable.

More info: Accessibility: focusing elements

html

Type undefined | stringInherited from IContainerSettingsSince 5.2.11

HTML content of the container. It can hold data placeholders, such as {category}.

More info: HTML content

hue

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Rotates the hue of all colors by this many degrees, from 0 to 360.

IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

id

Type undefined | stringInherited from IEntitySettings

A unique ID for looking the element up in root.entitiesById. Setting an ID that another element already has throws an error.

idField

Type undefined | stringInherited from ICategoryAxisSettings

Field in the data that holds a unique id for each category.

ignoreThemes

Type undefined | false | trueDefault falseInherited from IEntitySettingsSince 5.15.6

Ignores themes: no theme rule applies to the element, not even one of the default theme.

interactive

Type undefined | false | trueInherited from ISpriteSettings

Makes the element respond to the pointer. Adding a pointer event listener to it turns this on.

interactiveChildren

Type undefined | false | trueDefault trueInherited from IContainerSettings

Makes every descendant, not just direct children, interactive when the container itself is interactive.

interpolationDuration

Type undefined | numberDefault 0Inherited from IComponentSettings

Duration in milliseconds of the animation from old values to new ones, e.g. when data changes.

More info: Animations: animating data values

interpolationEasing

Type $ease.EasingInherited from IComponentSettings

Easing function of the animation from old values to new ones.

More info: Animations: easing functions

invert

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Color inversion, from 0 (no changes) to 1 (fully inverted colors).

IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

isMeasured

Type undefined | false | trueDefault trueInherited from ISpriteSettings

If false, the element's bounds are not measured, so it takes no part in its parent's layout or size.

layer

Type undefined | numberInherited from ISpriteSettings

Layer to draw the element on: elements on higher layers show in front of those on lower ones. If not set, the element is on its parent's layer.

layerMargin

Type IMarginInherited from ISpriteSettingsSince @5.2.39

Margins in pixels that make the element's layer larger than the chart, or, when negative, smaller.

layout

Type Layout | nullInherited from IContainerSettings

How children are arranged, e.g. root.horizontalLayout, root.verticalLayout or root.gridLayout. Without a layout, children are placed by their own x and y.

More info: Containers: layout

marginBottom

Type undefined | numberInherited from ISpriteSettings

Bottom margin in pixels.

marginLeft

Type undefined | numberInherited from ISpriteSettings

Left margin in pixels.

marginRight

Type undefined | numberInherited from ISpriteSettings

Right margin in pixels.

marginTop

Type undefined | numberInherited from ISpriteSettings

Top margin in pixels.

mask

Type Graphics | nullInherited from IContainerSettings

An element whose shape clips the container's children.

More info: Containers: masks

maskContent

Type undefined | false | trueInherited from IContainerSettings

Clips all content that goes outside the container's bounds.

maxDeviation

Type undefined | numberDefault 0.1Inherited from IAxisSettings

How far past its ends the axis can be zoomed or panned, as a share of the visible range: 0.1 is 10%.

More info: Zoom and pan: over zooming

maxHeight

Type number | nullInherited from ISpriteSettings

Maximum allowed height in pixels.

maxWidth

Type number | nullInherited from ISpriteSettings

Maximum allowed width in pixels.

maxZoomCount

Type undefined | numberInherited from IAxisSettings

Most cells to show at a time, such as categories on a CategoryAxis or baseInterval periods on a DateAxis. The axis can't be zoomed out any further.

More info: Zoom and pan: limiting zoom scope

maxZoomFactor

Type number | nullDefault 1000Inherited from IAxisSettings

Roughly how many times the axis can be zoomed in. A CategoryAxis ignores it and zooms in as far as minZoomCount categories; a DateAxis set to null (its default) zooms in as far as minZoomCount base intervals.

minHeight

Type number | nullInherited from ISpriteSettings

Minimum allowed height in pixels.

minorAxisFillsEnabled

Type undefined | false | trueInherited from IAxisSettingsSince 5.14.0

Creates axis fills for the cells of the minor grid too, not only the main one. The fillRule still decides which of them show.

minWidth

Type number | nullInherited from ISpriteSettings

Minimum allowed width in pixels.

minZoomCount

Type undefined | numberInherited from IAxisSettings

Fewest cells to show at a time, such as categories on a CategoryAxis or baseInterval periods on a DateAxis. The axis can't be zoomed in any further.

More info: Zoom and pan: limiting zoom scope

numberFormatter

Type NumberFormatter | undefinedInherited from ISpriteSettings

A NumberFormatter to use for this element instead of the root's.

More info: /v5/concepts/using-formatters/

opacity

Type undefined | numberDefault 1Inherited from ISpriteSettings

Opacity, from 0 (transparent) to 1 (opaque).

The theme's "default" state has opacity: 1, so show(), and leaving a state that changes opacity, bring it back to 1, not to a value set here. To come back to another value, set it in the "default" state too:

sprite.states.create("default", { opacity: 0.5 }).

paddingBottom

Type undefined | numberInherited from IContainerSettings

Bottom padding in pixels.

paddingLeft

Type undefined | numberInherited from IContainerSettings

Left padding in pixels.

paddingRight

Type undefined | numberInherited from IContainerSettings

Right padding in pixels.

paddingTop

Type undefined | numberInherited from IContainerSettings

Top padding in pixels.

panX

Type undefined | false | trueInherited from IAxisSettings

false keeps this axis in place when the chart is panned horizontally, by dragging or with the mouse wheel.

More info: Zoom and pan: excluding axes from pan or zoom

panY

Type undefined | false | trueInherited from IAxisSettings

false keeps this axis in place when the chart is panned vertically, by dragging or with the mouse wheel.

More info: Zoom and pan: excluding axes from pan or zoom

position

Type "absolute" | "relative"Default "relative"Inherited from ISpriteSettings

Positioning of the element.

"absolute" leaves the element out of its parent's layout and size: it is placed by its x and y only.

renderer

Type RInherited from IAxisSettings

The renderer that draws the axis line, labels, ticks, grid and fills:

AxisRendererX for a horizontal axis, AxisRendererY for a vertical one.

More info: XY chart: axis renderer

reverseChildren

Type undefined | false | trueInherited from IContainerSettingsSince 5.1.1

Lays out the children in reverse order.

role

Type RoleInherited from ISpriteSettings

Element's role.

More info: Accessibility: roles

rotation

Type undefined | numberDefault 0Inherited from ISpriteSettings

Rotation in degrees, clockwise, around the point set by centerX and centerY.

saturate

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Saturation.

  • 0 - grayscale

  • 1 - no changes (default)

  • >1 - more saturated IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

scale

Type undefined | numberDefault 1Inherited from ISpriteSettings

Scale, around the point set by centerX and centerY: below 1 shrinks the element, above 1 enlarges it.

sepia

Type undefined | numberInherited from ISpriteSettingsSince 5.5.0

Sepia tone, from 0 (no changes) to 1 (full sepia).

IMPORTANT: This setting is not supported in Safari browsers.

More info: Filters

setStateOnChildren

Type undefined | false | trueDefault falseInherited from IContainerSettings

Applies every state set on the container to its children too.

More info: Containers: states

showTooltipOn

Type "hover" | "always" | "click"Default "hover"Inherited from ISpriteSettingsSince 5.0.16

When the element's tooltip shows:

  • "hover" (default) - while the pointer is over the element, or after a tap on it until a tap elsewhere.

  • "always" - all the time. To show tooltips of several elements at once, give each its own Tooltip (tooltip).

  • "click" - after a click or tap on the element, until a click anywhere else on the page.

More info: Tooltips: sticky tooltips

snapTooltip

Type undefined | false | trueDefault trueInherited from IAxisSettings

Snaps the tooltip to tooltipLocation in the cell under the cursor, instead of following the cursor exactly.

start

Type undefined | numberDefault 0Inherited from IAxisSettings

Start of the visible (zoomed) part of the axis: 0 is the start of the axis, 1 the end. Set it to pre-zoom: 0.1 hides the first 10%.

More info: Zoom and pan: pre zooming axes

startLocation

Type undefined | numberDefault 0Inherited from ICategoryAxisSettings

Where within the first category the axis starts, from 0 (its start) to 1 (its end): 0.5 cuts off the first half of the first category.

stateAnimationDuration

Type undefined | numberDefault 0Inherited from IEntitySettings

How long, in milliseconds, a switch from one state to another animates.

0 switches at once.

stateAnimationEasing

Type $ease.EasingDefault out(cubic)Inherited from IEntitySettings

Easing of the animated switch from one state to another.

tabindexOrder

Type undefined | numberInherited from ISpriteSettings

An internal order by which focusable elements will be selected within the chart.

More info: Accessibility: focusing elements

templateField

Type undefined | stringInherited from ISpriteSettings

Field in the data item's data object that holds settings for this element, applied over its template's.

More info: Template fields

themes

Type ArrayInherited from IEntitySettings

Themes applied to the element and everything inside it.

themeTags

Type ArrayInherited from IEntitySettings

Tags that theme rules can target. They also count for the element's children, so a rule can match a child by a tag of its parent.

More info: Themes

themeTagsSelf

Type ArrayInherited from IEntitySettings

Tags that theme rules can target, like themeTags, but only for this element, not its children.

More info: Themes

toggleKey

Type "disabled" | "active" | "none" | undefinedInherited from ISpriteSettings

Setting that a click or tap toggles between true and false:

"active" or "disabled". "none" turns toggling off.

tooltip

Type TooltipInherited from IAxisSettings

Tooltip that shows the axis value at the cursor's position.

tooltipHTML

Type undefined | stringInherited from ISpriteSettingsSince 5.2.11

HTML content of the element's tooltip, shown in place of tooltipText.

tooltipLocation

Type undefined | numberDefault 0.5Inherited from IAxisSettings

Where within a cell the tooltip snaps to when snapTooltip is on: 0 the cell's start, 0.5 its middle, 1 its end.

tooltipPosition

Type "fixed" | "pointer"Default "fixed"Inherited from ISpriteSettings

Where the tooltip points: "fixed" at tooltipX and tooltipY, or "pointer" at the pointer, following it.

tooltipText

Type undefined | stringInherited from ISpriteSettings

Text of the element's tooltip. It can hold data placeholders, such as {value}.

tooltipX

Type number | PercentDefault am5.percent(50)Inherited from ISpriteSettings

Where on the element the tooltip points, horizontally: pixels from its left edge, or a percent of its width.

tooltipY

Type number | PercentDefault am5.percent(50)Inherited from ISpriteSettings

Where on the element the tooltip points, vertically: pixels from its top edge, or a percent of its height.

userData

Type anyInherited from IEntitySettings

Any data of your own to keep with the element.

verticalScrollbar

Type ScrollbarInherited from IContainerSettings

A Scrollbar that scrolls the content vertically when it does not fit in the container.

More info: Containers: scrollbar

visible

Type undefined | false | trueDefault trueInherited from ISpriteSettings

Whether the element is shown. Unlike show() and hide(), it does not animate.

wheelable

Type undefined | false | trueInherited from ISpriteSettings

Makes the element receive mouse wheel events. While the pointer is over it, the wheel no longer scrolls the page.

width

Type number | Percent | nullInherited from ISpriteSettings

Width in pixels, or a Percent of the parent's inner width. In a horizontal layout, a percent width is a share of the width the other children leave.

x

Type number | Percent | nullInherited from ISpriteSettings

X position in the parent: pixels from its left edge, or a Percent of its inner width, measured from inside its left padding.

y

Type number | Percent | nullInherited from ISpriteSettings

Y position in the parent: pixels from its top edge, or a Percent of its inner height, measured from inside its top padding.

zoomable

Type undefined | false | trueInherited from IAxisSettings

false makes zoom() do nothing, so the cursor, scrollbars, pinch and mouse wheel can't zoom or scroll the axis. Dragging the plot area still pans it.

zoomOut

Type undefined | false | trueDefault trueInherited from IAxisSettingsSince 5.14.0

false leaves the axis out of the chart's zoom-out: the zoom-out button doesn't reset it, and zooming it doesn't show the button.

zoomX

Type undefined | false | trueInherited from IAxisSettings

false keeps this axis as it is when the mouse wheel zooms the chart horizontally. The cursor, scrollbars and pinch still zoom it; use zoomable to stop those too.

More info: Zoom and pan: excluding axes from pan or zoom

zoomY

Type undefined | false | trueInherited from IAxisSettings

false keeps this axis as it is when the mouse wheel zooms the chart vertically. The cursor, scrollbars and pinch still zoom it; use zoomable to stop those too.

More info: Zoom and pan: excluding axes from pan or zoom

Private settings

These are read-only settings accessible from a CategoryDateAxis object using its getPrivate() method. Read about private settings.

baseInterval

Read onlyType ITimeInterval

The baseInterval in use.

11 inherited items
cellWidth

Read onlyType undefined | numberInherited from IAxisPrivate

Distance in pixels between grid lines (read-only). Approximate on a DateAxis, whose grid can be uneven.

Watch it to resize or hide labels so they don't overlap.

endIndex

Read onlyType undefined | numberInherited from ICategoryAxisPrivate

Index after the last category in view.

focusable

Read onlyType undefined | false | trueInherited from ISpritePrivateSince 5.3.16

If set to false, its tabindex will be set to -1, so it does not get focused with TAB, regardless whether its public setting focusable is set to true.

htmlElement

Read onlyType HTMLDivElementInherited from IContainerPrivate

The <div> element that holds the container's html content.

htmlElementWrapper

Read onlyType HTMLDivElementInherited from IContainerPrivateSince 5.11.2

A wrapper <div> for htmlElement.

lastTooltipCoords

Read onlyType IPointInherited from ISpritePrivateSince 5.11.3

The last point the tooltip was shown at, so it is not shown again at the same place.

showingTooltip

Read onlyType undefined | false | trueInherited from ISpritePrivate

true while the element shows its tooltip.

startIndex

Read onlyType undefined | numberInherited from ICategoryAxisPrivate

Index of the first category in view.

tooltipPosition

Read onlyType undefined | numberInherited from IAxisPrivate

Position on the axis (0 to 1) the tooltip points to.

tooltipTarget

Read onlyType GraphicsInherited from ISpritePrivate

An element whose tooltip point and colors the tooltip uses, in place of this element's.

trustBounds

Read onlyType undefined | false | trueInherited from ISpritePrivateSince 5.5.0

Checks that the pointer is within the element's bounds before dispatching "pointerover". This prevents ghost tooltips that sometimes appear while the pointer moves over interactive elements.

It is true by default on Rectangle and Circle.

Properties

className

StaticType stringDefault "CategoryDateAxis"

classNames

StaticType ArrayDefault CategoryAxis.classNames.concat([CategoryDateAxis.className])

24 inherited items
adapters

Type AdaptersDefault new Adapters(this)Inherited from Entity

axisHeader

Type ContainerDefault this.children.push(Container.new(this._root, { themeTags: ["axis", "header"], position: "absolute", background: Rectangle.new(this._root, { themeTags: ["header", "background"], fill: this._root.interfaceColors.get("background") })._markC("themeTags", "fill") })._markC("themeTags", "position", "background"))Inherited from Axis

A container for extra content, such as a legend, a label or an icon. It sits above a Y axis, and to the left of an X axis.

More info: Axis headers

axisRanges

Type ListDefault new List()Inherited from Axis

The axis's ranges: highlighted values or spans, each with its own grid, label and fill.

More info: Axis ranges

bulletsContainer

Type ContainerDefault this.children.push(Container.new(this._root, { isMeasured: false, width: p100, height: p100, position: "absolute" }))Inherited from Axis

Holds the axis's bullets.

chart

Type XYChart | undefinedInherited from Axis

The chart the axis belongs to.

children

Type ChildrenDefault new Children(this)Inherited from Container

The container's child elements.

data

Type ListDataInherited from Component

The component's data: a list of data objects, each made into a data item.

More info: Data

dataItem

Type DataItem | undefinedInherited from Sprite

The element's DataItem, or, if it has none, its nearest parent's.

NOTE: data items are assigned automatically in most cases where it matters. Set one only if you know what you are doing.

dataItems

Type ArrayInherited from Component

The component's data items.

enableDispose

Type booleanDefault trueInherited from Settings

Set to false to make dispose() do nothing.

events

Type SpriteEventDispatcherInherited from Sprite

ghostLabel

Type AxisLabelInherited from Axis

An invisible label that keeps room for the axis's widest label, so the axis doesn't shrink while zooming (see fixAxisSize).

More info: Value axis: ghost label

gridContainer

Type ContainerDefault Container.new(this._root, { width: p100, height: p100 })Inherited from Axis

Holds the axis's grid and fills, drawn below the series.

inited

Type booleanDefault falseInherited from Component

Becomes true after the component's first update.

labelsContainer

Type ContainerDefault this.children.push(Container.new(this._root, {}))Inherited from Axis

Holds the axis's labels and ticks.

minorDataItems

Type ArrayDefault []Inherited from Axis

Data items of the minor grid.

parent

Type Container | undefinedInherited from Sprite

Parent Container of this element.

root

Type RootInherited from EntitySince 5.0.6

The Root the object belongs to.

series

Type ArrayInherited from Axis

A list of series using this axis.

states

Type StatesDefault new States(this)Inherited from Entity

template

Type Template | undefinedInherited from Entity

A Template applied to the object. Its settings apply where the object has none set of its own.

topGridContainer

Type ContainerDefault Container.new(this._root, { width: p100, height: p100 })Inherited from Axis

Holds the grid and fills of axis ranges set to be drawn above the series.

uid

Type numberDefault ++counterInherited from Settings

A unique number, given to each object as it is created.

virtualParent

Type Container | undefinedInherited from Sprite

Methods

baseDuration()

Returns number

Returns the duration of baseInterval in milliseconds.

getTooltipText(position: number,
_adjustPosition?: undefined | false | true)

Returns string | undefined

Returns the text the axis tooltip shows at a position: the date of the category there.

86 inherited items
allChildren()

Returns ArrayInherited from Container

Returns all children, including the background, vertical scrollbar and mask.

animate(options: AnimationOptions)

Returns AnimationInherited from Settings

Animates a setting from its current value (or from) to to. The setting jumps to from at once. With duration 0, or no value to start from, it is set to to at once and the returned animation is already stopped.

More info: Animations: animating settings

appear(duration?: undefined | number,
delay?: undefined | number)

Returns PromiseInherited from Sprite

Plays the reveal animation: hides the element at once, then shows it, whether it was hidden or not.

axisPositionToIndex(position: number)

Returns numberInherited from CategoryAxis

Returns the index of the category at a position on the axis.

categoryToIndex(category: string)

Returns numberInherited from CategoryAxis

Returns an index of a category.

categoryToPosition(category: string)

Returns numberInherited from CategoryAxis

Returns the position (0 to 1) of the middle of a category on the axis.

compositeOpacity()

Returns numberInherited from SpriteSince 5.2.11

Returns the element's opacity multiplied by those of all its parents.

compositeRotation()

Returns numberInherited from SpriteSince 5.9.2

Returns the element's rotation plus those of all its parents, in degrees.

compositeScale()

Returns numberInherited from SpriteSince 5.9.2

Returns the element's scale multiplied by those of all its parents.

contentHeight()

Returns numberInherited from Container

contentWidth()

Returns numberInherited from Container

coordinateToPosition(coordinate: number)

Returns numberInherited from Axis

Converts a pixel coordinate along the axis, from its left or top edge, to a position on the axis (0 to 1), taking zoom into account.

createAxisRange(axisDataItem: DataItem)

Returns DataItemInherited from Axis

Adds a data item, made with axis.makeDataItem(), as an axis range and returns it.

More info: Axis ranges

depth()

Returns numberInherited from Sprite

Returns how deep the element is in the tree: the number of parents it has.

dispose()

Returns voidInherited from Settings

Disposes the object, freeing everything it holds. A disposed object can't be used again.

eachChildren(f: (child: Sprite) => void)

Returns voidInherited from Container

Calls f for each child, including the background, vertical scrollbar and mask.

endIndex()

Returns numberInherited from CategoryAxis

Returns the index after the last category in view.

get(key: Key,
fallback: F)

Returns NonNullable | FInherited from Entity

Returns the value of setting key, run through any adapters, or fallback if it is not set.

More info: Settings

getCellWidthPosition()

Returns numberInherited from CategoryAxisSince 5.2.30

Returns the distance between two grid lines as a share of the visible part of the axis.

getDataItemById(id: string)

Returns DataItem | undefinedInherited from Component

Returns the data item whose id matches, if any.

getDateFormatter()

Returns DateFormatterInherited from Sprite

Returns the DateFormatter of the element: its own dateFormatter, or else the one of the Root.

More info: /v5/concepts/using-formatters/

getDurationFormatter()

Returns DurationFormatterInherited from Sprite

Returns the DurationFormatter of the element: its own durationFormatter, or else the one of the Root.

More info: /v5/concepts/using-formatters/

getNumberFormatter()

Returns NumberFormatterInherited from Sprite

Returns the NumberFormatter of the element: its own numberFormatter, or else the one of the Root.

More info: /v5/concepts/using-formatters/

getSeriesItem(series: XYSeries,
position: number)

Returns DataItem | undefinedInherited from CategoryAxis

Returns the series data item of the category at a position on the axis.

getTooltip()

Returns Tooltip | undefinedInherited from Sprite

Returns the element's Tooltip: its own tooltip, or else the nearest parent's.

getX(value: string)

Returns numberInherited from CategoryAxis

Returns the X coordinate in pixels of the middle of a category.

getY(value: string)

Returns numberInherited from CategoryAxis

Returns the Y coordinate in pixels of the middle of a category.

has(key: Key)

Returns booleanInherited from Settings

Returns true if setting key is set.

More info: Settings

height()

Returns numberInherited from Sprite

Returns the element's height in pixels.

hide(duration?: undefined | number)

Returns PromiseInherited from Sprite

Hides the element and returns a Promise that resolves when its hiding animations finish.

series.hide().then(function(ev) {
  console.log("Series finished hiding");
})

series.hide().then(function(ev) {
  console.log("Series finished hiding");
})
hideTooltip()

Returns Promise | undefinedInherited from Sprite

Hides the element's Tooltip.

hover()

Returns voidInherited from Sprite

Hovers the element as if the pointer were over it: applies its hover state and shows its tooltip.

indexToPosition(index: number,
location?: undefined | number,
final?: undefined | false | true)

Returns numberInherited from CategoryAxis

Converts a category index to a position on the axis (0 to 1).

innerHeight()

Returns numberInherited from Container

Returns the container's height without padding, in pixels.

innerWidth()

Returns numberInherited from Container

Returns the container's width without padding, in pixels.

isDisposed()

Returns booleanInherited from Settings

Returns true if the object has been disposed.

isDragging()

Returns booleanInherited from Sprite

Returns true while the element is being dragged.

isFocus()

Returns booleanInherited from Sprite

Returns true if this element does currently have focus.

isHidden()

Returns booleanInherited from Sprite

Returns true if the element was hidden with hide(), even while its hiding animation still plays. For the visible setting, use isVisible().

isHiding()

Returns booleanInherited from Sprite

Returns true while the element's hiding animation plays.

isHover()

Returns booleanInherited from Sprite

Returns true if the pointer is over the element.

isShowing()

Returns booleanInherited from Sprite

Returns true while the element's showing animation plays.

isType(type: string)

Returns thisInherited from Entity

Returns true if the object is of class type or extends it.

isVisible()

Returns booleanInherited from Sprite

Returns false if either the public or the private setting visible is false, or forceHidden is true.

isVisibleDeep()

Returns booleanInherited from SpriteSince 5.2.7

Same as isVisible(), except it checks all ascendants, too.

makeDataItem(data: IComponentDataItem,
dataContext?: any)

Returns DataItemInherited from Component

Creates and processes a data item, without adding it to dataItems.

markDirtyKey(key: Key)

Returns voidInherited from Sprite

Marks a setting as changed, so the element reads it again, running its adapters, on the next frame.

markDirtyValues(_dataItem?: DataItem)

Returns voidInherited from ComponentSince 5.0.21

Makes the component redraw from its data on the next frame.

maxHeight()

Returns numberInherited from Sprite

Returns the most height the element may take, in pixels: its maxHeight, a fixed height, or else its parent's inner height.

maxWidth()

Returns numberInherited from Sprite

Returns the most width the element may take, in pixels: its maxWidth, a fixed width, or else its parent's inner width.

new(root: Root,
settings: ITSettings,
template?: Template)

StaticReturns TInherited from Entity

Creates an instance of the class. Use it instead of new Class().

More info: Getting started: new element syntax

off(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from SettingsSince 5.9.2

Removes a callback added with on(). Without callback, removes all of them for key.

More info: Events: settings value change

offDebounced(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from Settings

Removes a callback added with onDebounced(). Without callback, removes all of them for key.

More info: Events: settings value change

offDebouncedPrivate(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from Settings

Removes a callback added with onPrivateDebounced(). Without callback, removes all of them for key.

More info: Events: settings value change

offPrivate(key: Key,
callback?: undefined | (value: [""], target: this, key: Key) => void)

Returns voidInherited from SettingsSince 5.9.2

Removes a callback added with onPrivate(). Without callback, removes all of them for key.

More info: Events: settings value change

on(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from Settings

Calls callback each time the value of setting key changes or is removed. Setting the same value again does not call it.

More info: Events: settings value change

once(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from SettingsSince 5.20.4

Like on(), but the callback is removed after it is called once.

More info: Events: settings value change

onceDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from SettingsSince 5.20.4

Like onDebounced(), but the callback is removed after it is called once.

More info: Events: settings value change

onDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from Settings

Like on(), but waits until setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

More info: Events: settings value change

onPrivate(key: Key,
callback: (value: [""], target: this, key: Key) => void)

Returns IDisposerInherited from Settings

Calls callback each time the value of private setting key changes.

More info: Events: settings value change

onPrivateDebounced(key: Key,
callback: (value: [""], target: this, key: Key) => void,
debounceDelay: number)

Returns IDisposerInherited from Settings

Like onPrivate(), but waits until private setting key has not changed for debounceDelay milliseconds, then calls callback once with the latest value.

More info: Events: settings value change

pushDataItem(data: IComponentDataItem,
dataContext?: any)

Returns DataItemInherited from Component

Creates a data item straight from settings, not from data, and adds it to the component's data items.

remove(key: Key)

Returns voidInherited from Entity

Removes the value set for setting key. The setting goes back to the value from a theme or template, if one has it.

More info: Settings

removeAll()

Returns voidInherited from Settings

Removes all settings, as remove() does for each one.

More info: Settings

scrollToChild(child: Sprite)

Returns voidInherited from ContainerSince 5.10.5

Scrolls the container so that the child comes into view, if it is out of view. Works only on a container with a verticalScrollbar.

set(key: Key,
value: Value)

Returns ValueInherited from Entity

Sets setting key to value and returns value. A value set this way overrides themes and templates, and stops any animation of the setting.

More info: Settings

setAll(settings: Partial)

Returns voidInherited from Settings

Sets several settings at once, from an object of key-value pairs.

More info: Settings

setTimeout(fn: () => void,
delay: number)

Returns IDisposerInherited from Entity

Calls fn after delay milliseconds, unless the object is disposed first. Disposing the returned disposer cancels it.

show(duration?: undefined | number)

Returns PromiseInherited from Sprite

Shows the element and returns a Promise that resolves when its showing animations finish.

series.show().then(function(ev) {
  console.log("Series is now fully visible");
})

series.show().then(function(ev) {
  console.log("Series is now fully visible");
})
showTooltip(point?: IPoint)

Returns Promise | undefinedInherited from Sprite

Shows the element's Tooltip. Does nothing if the element has no tooltipText or tooltipHTML.

startIndex()

Returns numberInherited from CategoryAxis

Returns the index of the first category in view.

toAxisPosition(position: number)

Returns numberInherited from Axis

Converts a position in the plot area (0 to 1, from its left or top edge) to a position on the axis, taking zoom and inversed into account.

toBack()

Returns voidInherited from Sprite

Moves the element to the start of its parent's children, so it is drawn under its siblings, or, in a layout, placed first.

toFront()

Returns voidInherited from Sprite

Moves the element to the end of its parent's children, so it is drawn over its siblings, or, in a layout, placed last.

toGlobal(point: IPoint)

Returns IPointInherited from Sprite

Converts a point within the element to a point relative to the root.

toGlobalPosition(position: number)

Returns numberInherited from AxisSince 5.4.2

Converts a position on the axis to a position in the plot area (0 to 1, from its left or top edge): the opposite of toAxisPosition.

toLocal(point: IPoint)

Returns IPointInherited from Sprite

Converts a point relative to the root to a point within the element.

unhover()

Returns voidInherited from Sprite

Ends a hover, as if the pointer left the element: hides its tooltip and takes it out of its hover state.

updateData(data: Array)

Returns voidInherited from Component

Updates the data in place, keeping the existing data items: each object's values go into the data item at the same index. Extra objects are added as new data items, and data items beyond the new data are removed.

updateTooltip()

Returns voidInherited from Axis

Moves the axis tooltip, and the series tooltips it drives, to the cursor's current position. Call it after changing the zoom from code.

width()

Returns numberInherited from Sprite

Returns the element's width in pixels.

x()

Returns numberInherited from Sprite

Returns the element's X position in pixels, relative to its parent, without dx.

y()

Returns numberInherited from Sprite

Returns the element's Y position in pixels, relative to its parent, without dy.

zoom(start: number,
end: number,
duration?: undefined | number,
priority?: "start" | "end")

Returns Animation | Animation | undefinedInherited from Axis

Zooms the axis to the range between start and end, where 0 is the start of the axis and 1 the end. The range is kept within maxDeviation, maxZoomFactor, minZoomCount and maxZoomCount.

zoomToCategories(startCategory: string,
endCategory: string,
duration?: undefined | number)

Returns voidInherited from CategoryAxis

Zooms the axis to show the categories from startCategory to endCategory, both included.

zoomToIndexes(start: number,
end: number,
duration?: undefined | number)

Returns voidInherited from CategoryAxis

Zooms the axis to show the categories from index start up to, but not including, end.

Events

Add event handlers to CategoryDateAxis object using its events.on() method. Read about adding event handlers.

22 inherited items
blur

Param { type: "blur", target: CategoryDateAxis, originalEvent: FocusEvent, target: Sprite }Inherited from ISpriteEvents

Invoked when element loses focus.

boundschanged

Param { type: "boundschanged", target: CategoryDateAxis }Inherited from ISpriteEvents

The element's bounds changed.

click

Param { type: "click", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The element was clicked or tapped. A press and release more than 5 pixels apart is not a click.

dataitemchanged

Param { type: "dataitemchanged", target: CategoryDateAxis, newDataItem: DataItem | undefined, oldDataItem: DataItem | undefined }Inherited from ISpriteEvents

The element's data item changed.

datavalidated

Param { type: "datavalidated", target: CategoryDateAxis }Inherited from IComponentEvents

The component's data changed and was processed.

dblclick

Param { type: "dblclick", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The element was double-clicked or double-tapped. Also dispatched on its parents.

dragged

Param { type: "dragged", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The element moved while being dragged.

dragstart

Param { type: "dragstart", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

Dragging of the element started: the pointer moved more than 5 pixels after pressing on it.

dragstop

Param { type: "dragstop", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

Dragging of the element stopped.

focus

Param { type: "focus", target: CategoryDateAxis, originalEvent: FocusEvent, target: Sprite }Inherited from ISpriteEvents

Invoked when element gains focus.

globalpointerdown

Param { type: "globalpointerdown", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

A pointer button was pressed, or a touch started, anywhere in the window, even outside the chart.

globalpointermove

Param { type: "globalpointermove", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The pointer moved anywhere in the window, even outside the chart.

globalpointerup

Param { type: "globalpointerup", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

A pointer button was released, or a touch ended, anywhere in the window, even outside the chart.

middleclick

Param { type: "middleclick", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The element was clicked with the middle mouse button.

pointerdown

Param { type: "pointerdown", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

A pointer button was pressed, or a touch started, over the element. Also dispatched on its parents.

pointerout

Param { type: "pointerout", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The pointer left the element.

pointerover

Param { type: "pointerover", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The pointer moved over the element.

pointerup

Param { type: "pointerup", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

A pointer button was released, or a touch ended, over the element.

positionchanged

Param { type: "positionchanged", target: CategoryDateAxis }Inherited from ISpriteEvents

The element's position changed.

rightclick

Param { type: "rightclick", target: CategoryDateAxis } & ISpritePointerEventInherited from ISpriteEvents

The element was clicked with the right mouse button.

valueschanged

Param { type: "valueschanged", target: CategoryDateAxis }Inherited from IComponentEvents

Values of the component's data items changed.

wheel

Param { type: "wheel", target: CategoryDateAxis, originalEvent: WheelEvent, point: IPoint }Inherited from ISpriteEvents

The mouse wheel turned while the pointer was over the element. Also dispatched on its parents.