- API
- KronoGraph
- Timeline Options
JavaScript
Timeline Options
You can set various options and defaults on the timeline by passing an object to the options() function.
The options() function accepts an object with the following properties:
objectOptions relating to annotations.
'auto' | 'off'default: 'auto'Whether annotations are automatically arranged in rails to reduce overlaps.
numberdefault: 120The height of the bottom annotation rail.
numberdefault: 160The maximum height of the annotation body.
numberdefault: 280The maximum width of the annotation body.
'always' | 'auto'default: 'auto'Whether rails are always shown, or appear automatically when there are annotations.
numberdefault: 120The height of the top annotation rail.
stringdefault: '#242c32'The color of the timeline background.
objectOptions relating to row controls.
objectOptions for the delete control on annotations.
stringdefault: '#3e414b'The background color for the annotation control.
stringdefault: '#afafaf'The color for the annotation control.
stringdefault: '#787c8e'The background color for the annotation control when hovered.
stringdefault: '#ffffff'The color for the annotation control when hovered.
booleandefault: trueWhether to show the annotation control.
objectOptions for the edit control on annotations.
stringdefault: '#3e414b'The background color for the annotation control.
stringdefault: '#afafaf'The color for the annotation control.
stringdefault: '#787c8e'The background color for the annotation control when hovered.
stringdefault: '#ffffff'The color for the annotation control when hovered.
booleandefault: falseWhether to show the annotation control.
objectOptions for the event fold controls.
objectOptions for the focus control on entity rows.
booleandefault: trueWhether to show the control.
objectOptions for the pin control on entity rows.
booleandefault: trueWhether to show the control.
objectOptions relating to entities.
'left' | 'right'default: 'left'The position of the glyph.
string | nulldefault: nullThe color to use for the background of entity labels. If null, backgroundColor is used.
'always' | 'individualEvents' | 'never'default: 'individualEvents'Controls when to show entity lines :
- 'always' - Always show entity lines.
- 'individualEvents' - Show entity lines with individual events only, not with the heatmap.
- 'never' - Never show entity lines.
numberdefault: 24Standard height of entity rows in px, with a minimum value of 14. Font icons are only displayed on events if this height is set to 20 or more.
numberdefault: 40When entity label area width mode is set to 'auto', specifies the number of characters at which the labels are truncated - using Intl.Segmenter. To disable truncation, set to 0.
'centered' | 'justified'default: 'centered'Controls how entity rows are spaced vertically in the timeline:
- 'centered' - Vertically clustered and centered along the timeline. Space above and below once a maximum separation is reached.
- 'justified' - Spread vertically across the height of the timeline, providing more space for event labels and font icons.
See Timeline Options for more information.
objectOptions relating to events.
null | string | string[] | HeatmapColorStep[] | HeatmapEventTypePriority[]default: nullThe color to apply to the heatmap:
- null - Cells use the average color of their underlying events, with an alpha applied based on the cell's value.
- string - All cells will use the color specified, with an alpha applied based on the cell's value.
- string[] - The array of colors specified will be used to assign colors based on each cell's value within the distribution of the cells in the visible range.
- heatmapColorStep[] - Colors are assigned to cells based on the step values provided.
- heatmapEventTypePriority[] - Colors are assigned to cells if they include an event of the specified event type. Event types are prioritised by the index values of the array; the first index is given the highest priority.
See the Heatmap Colors docs for details.
'any' | 'from' | 'to'default: 'any'The direction of the joins at each entity row for the underlying events that the heatmap will show:
- 'any' - Shows a heatmap for all underlying event directions.
- 'from' - Only shows a heatmap for entity rows that are the source of their underlying events.
- 'to' - Only shows a heatmap for entity rows that are the target of their underlying events.
booleandefault: trueWhether to apply padding to heatmap cells.
numberdefault: 100The number of visible events when the heatmap starts fading in.
string | nulldefault: nullIf a string, the value of the corresponding property on the event's data object is used for the heatmap. If null, the underlying event count is used.
'auto' | 'horizontal'default: 'auto'Controls how events are drawn:
- 'auto' - Automatically chooses the clearest way of drawing each event. Multi-directional events are drawn as a vertical line with horizontal arrowheads indicating the source/target role of each entity row, whereas uni-directional events are drawn as a single vertical arrow.
- 'horizontal' - All events are drawn as a vertical line with horizontal arrowheads indicating the source/target role of each entity row.
numberdefault: 1Alpha applied to fade out rows that have no revealed events.
'all' | 'focus'default: 'all'Controls when to show event lines :
- 'all' - Show event lines for all individual events.
- 'focus' - Only show event lines for focused entities.
objectOptions relating to expanding entity rows, see Expanded Rows.
booleandefault: trueOnly entity rows with overlapping duration events are expanded.
booleandefault: falseWhen entities are expanded, show lines for their sub-rows.
objectOptions relating to focus behavior.
stringdefault: '#8b041b'The background color to use for focused items.
booleandefault: trueWhether to reorder the entities on focus when the ordering is set to 'shorteneventlines'.
booleandefault: trueWhether to rescale the events on focus when scaleMode is set to 'nonlinear'.
booleandefault: falseControls if all events on neighbors of focused entities should be shown. For example, if entity A is focused and is linked to entity B via an event, this option controls if all events involving entity B should be shown.
stringdefault: 'sans-serif'The name of the font family to use across the timeline.
stringdefault: '#515f6c'The color to use for the background of highlighted entities, highlighted scale intervals and the marquee drag area. A translucent version of this color will be applied.
numberdefault: 150The number of milliseconds delay before the hover event is triggered.
numberdefault: 500The time, in milliseconds, between triggering range events. Note that adjusting this delay may interact with your application's flow rate and so cause unexpected changes in behavior.
objectOptions relating to the scale guide.
stringdefault: '#e5e8eb'The color of the line.
booleandefault: falseControls if the bottom time readout and scale guide line is shown.
booleandefault: falseControls if the top time readout and scale guide line is shown.
numberdefault: 10The distance in pixels to snap the line to events. Set to 0 to disable snapping.
stringdefault: '#e5e8eb'The color of the text.
stringdefault: 'auto'The date and time format. Set to auto to have the scale precision adapt to the current visible range. See Localization for more details.
numberdefault: 1The width of the line in pixels.
objectOptions relating to the timeline scales.
string | nulldefault: nullThe color of the background of the scale. If null, backgroundColor is used.
string | nulldefault: '#e5e8eb'The color of the scale borders. If null, backgroundColor is used.
'dmy' | 'mdy'default: 'mdy'The order of dates:
- 'dmy' - For day-month-year.
- 'mdy' - For month-day-year.
objectSpecifies the formats for displaying dates and times in the scale. See Localization for more details.
stringOne hundredth of a second, or 0.01 of a second.
stringYear, month, and day of month.
stringMonth, and day of month.
stringMonth, day of month, hour, and minutes.
stringMonth, day of month, hour, minutes, and seconds.
stringYear, month, day of month, hour, minutes, and seconds.
stringDay of month.
stringDay of month, hour, and minutes.
stringDay of month, hour, minutes, and seconds.
stringFull day of week.
stringFull day of week, hour and minutes.
stringFull day of week, hour, minutes, and seconds.
stringFull month.
stringYear and full month.
stringOne tenth of a millisecond, or 0.0001 of a second.
stringOne tenth of a microsecond, or 0.0000001 of a second.
stringOne millionth of a second, or 0.000001 of a second.
stringOne thousandth of a second, or 0.001 of a second.
stringOne billionth of a second, or 0.000000001 of a second.
stringShort day of week.
stringShort month.
stringOne hundredth of a millisecond, or 0.00001 of a second.
stringOne hundredth of a microsecond, or 0.00000001 of a second.
stringHours and minutes.
stringHour, minutes, and seconds.
stringHour, minutes, seconds, and tenths of a second.
stringHour, minutes, seconds, and thousandths of a second.
stringHour, minutes, seconds, and millionths of a second.
stringHour, minutes, seconds, and billionths of a second.
stringFull year.
objectSpecifies names to use when displaying dates and times in the scale. See Localization for more details.
string[]The names of the AM and PM symbols.
string[]The full names of days of the week, starting with Sunday.
string[]The full names of months, starting with January.
string[]The full names of months as part of a date, starting with January.
string[]The short names of days of the week, starting with Sunday.
string[]The short names of months, starting with January.
booleandefault: trueControls whether the scale fades at the left.
'auto' | 'off'default: 'auto'Controls how far the user can pan.
- 'auto' - Limits the range the user can pan so data is always in view.
- 'off' - Allows the user to pan to anywhere on the timeline. Use this option for lazy loading content.
For 'nonlinear' scaleMode, the panLimit cannot be 'off'; it will always revert to the 'auto' behavior.
'linear' | 'nonlinear'default: 'linear'Controls the spacing between events on the timeline.
booleandefault: trueControls if the scale at the bottom of the timeline is shown.
booleandefault: trueControls if the scale at the top of the timeline is shown.
stringdefault: '#e5e8eb'The color of the scale's text. Also changes the color of the markers and their labels.
numberdefault: 14The text size of the scale.
booleandefault: trueWhether a 12-hour clock should be used. False specifies a 24-hour clock.
'off' | 'day' | 'week' | 'month' | 'year'default: 'off'Controls Scale Wrapping, i.e. the way time is wrapped in the scale:
- 'off' - No wrapping, the scale shows time in a linear way.
- 'day' - The scale shows the time since the start of the day.
- 'week' - The scale shows the time since the start of the week.
- 'month' - The scale shows the time since the start of the month.
- 'year' - The scale shows the time since the start of the year.
'auto' | objectdefault: 'auto'Sets a limit for how far a user can zoom out.
- 'auto' - The limit is set by KronoGraph
Use the parameters to specify the limit. Can be used for lazy loading content to improve performance and loading times for large datasets. For 'nonlinear' scaleMode, the zoomOutLimit is always the 'auto' behavior; any specified limits will be ignored.
stringdefault: '#f5f7fa'The color to use to highlight selected events and entities. A translucent version of this color is applied.
booleandefault: trueControls whether the lens highlight is shown, see Show Lens Highlight.
booleandefault: trueControls if timeline warning messages are displayed in the console.
objectOptions relating to time series charts.
'top' | 'bottom'default: 'top'Position of time series charts in relation to the timeline.
numberdefault: 25Percentage of the view height allocated to time series charts.