JavaScript & React libraryAPI

Interface: TimelineConfigInterface

Extends

Extended by

Properties

noDataMessage?

optional noDataMessage: string | false

Text to display when there is no data. When set to false, this message will not be displayed.

Default

'No data'

Inherited from

DisplayStateConfigInterface.noDataMessage


loadingMessage?

optional loadingMessage: string | false

Text to display when data is loading. When set to false, this message will not be displayed.

Default

'Data loading...'

Inherited from

DisplayStateConfigInterface.loadingMessage


disableStateMessages?

optional disableStateMessages: boolean

Whether to disable all messages in the DisplayState element.

Default

false

Inherited from

DisplayStateConfigInterface.disableStateMessages


allowPointerEvents?

optional allowPointerEvents: boolean

Whether to allow pointer events on the DisplayState element when message is visible.

Default

false

Inherited from

DisplayStateConfigInterface.allowPointerEvents


padding?

optional padding: Padding

Padding between the outer edges of the timeline. Affects only timeline container without animation button. Set in pixels.

Default

{ top: 1, left: 5, bottom: 1, right: 5 }

axisTickHeight?

optional axisTickHeight: number

Height of the ticks that appear along the timeline axis. Set in pixels.

Default

16

selectionRadius?

optional selectionRadius: number

Corners roundness of the data selection brush. Set in pixels.

Default

3

selectionPadding?

optional selectionPadding: number

Padding of the data selection brush. Set in pixels.

Default

8

barCount?

optional barCount: number

Number of bars to be displayed in the timeline. Ignored if dataStep is set.

Default

250

barRadius?

optional barRadius: number

Corners roundness of each bar on the timeline. Set in pixels.

Default

1

barPadding?

optional barPadding: number

Padding between each bar on the timeline. Set in percent of bar width from 0 (as 0% of the bar width) to 1 (as 100% of the bar width).

Default

0.1

barTopMargin?

optional barTopMargin: number

Margin between the top edge of the timeline and the maximum height bar. Set in pixels.

Default

20

minBarHeight?

optional minBarHeight: number

Height of bars with an empty data on the timeline. Set in pixels.

Default

1

stickySelection?

optional stickySelection: boolean

Stick selection brush coordinates to the bar edges.

Default

true

allowSelection?

optional allowSelection: boolean

Determines whether or not the timeline allows users to select a range of dates using a selection brush control.

Default

true

showAnimationControls?

optional showAnimationControls: boolean

If set to true, shows an animation control button that allows to play or pause animation of selected range of dates.

Default

false

animationSpeed?

optional animationSpeed: number

Rate of refresh for each selection brush movement. Set in ms.

Default

50

dataStep?

optional dataStep: number

Generate bars of width of this value mapped in the X axis units. Overrides barCount. Set in ms for Date[] data.

Default

undefined

tickStep?

optional tickStep: number

Interval between each tick mark on the timeline axis. Set in the X axis units, in ms for Date[] timeline data or in relative units for number[] timeline data. Custom dateFormat may be required for the proper display of tick labels if the timeline data is Date[].

Default

undefined

formatter()?

optional formatter: (date) => string

Formatter function for ticks displayed on the timeline axis.

Parameters

ParameterTypeDescription
datenumber | DateThe date or number to format

Returns

string

The formatted string representation of the date/number


onBrush()?

optional onBrush: (selection, isManuallySelected?) => void

Callback for the range selection. Provides current selection of Timeline.

Parameters

ParameterTypeDescription
selectionundefined | [Date, Date] | [number, number]The current selection range as [start, end] dates or numbers
isManuallySelected?booleanWhether the selection was made by user interaction

Returns

void


onBarHover()?

optional onBarHover: (data) => void

Callback that is called when a bar is hovered over. Provides BarData for hovered bar: rangeStart, rangeEnd and count of records in this bar.

Parameters

ParameterTypeDescription
dataTimelineBarDataThe data for the hovered bar

Returns

void


onAnimationPlay()?

optional onAnimationPlay: (isAnimationRunning, selection) => void

Callback for the animation play that will be executed in playAnimation. Provides isAnimationRunning state and current selection of Timeline.

Parameters

ParameterTypeDescription
isAnimationRunningbooleanWhether the animation is currently running
selectionundefined | (number | Date)[]The current selection range

Returns

void


onAnimationPause()?

optional onAnimationPause: (isAnimationRunning, selection) => void

Callback for the animation play that will be executed in pauseAnimation. Provides isAnimationRunning state and current selection of Timeline.

Parameters

ParameterTypeDescription
isAnimationRunningbooleanWhether the animation is currently running
selectionundefined | (number | Date)[]The current selection range

Returns

void


onAnimationTick()?

optional onAnimationTick: (selection) => void

Callback that is called on each animation tick. Provides current selection of Timeline.

Parameters

ParameterTypeDescription
selectionundefined | (number | Date)[]The current selection range

Returns

void