Search

Login

Time Bar Options

These are the options you can pass to the first argument of timebar.options().

For an example of how these options work, see Customise the Time Bar.

area

TimeBarAreaOptions

Options controlling the time bar when type is set to 'area'.

colour

string(Colour)default: 'rgba(32, 32, 200, 0.67)'

The colour of the time bar area border line. The fill area will be a translucent version of this colour.

backColour

string(Colour)default: 'white'

The colour to use for the background of the time bar.

changeEventThrottling

numberdefault: 250

The minimum interval between change events in milliseconds.

controlBarTheme

"light" | "dark"default: 'light'

The colour theme of the time bar's control bar.

fontColour

string(Colour)default: 'grey'

The colour to set the font of the time bar (used in the scales).

fontFamily

stringdefault: 'sans-serif'

The default font family to use, for example, 'sans-serif'.

fontSize

numberdefault: 12

The font size to use. There is no size limit, but most fonts look best with a value between 7 and 13.

groups

TimeBarDataGroups

Options controlling the grouping within histogram bars.

categories

null | (string | number)[]default: null

Values of the custom property that the time bar should accept. Items with other values will be placed in an uncategorised group. Set to null to disable bar groups.

colours

string(Colour)[] | nulldefault: null

Colours to use for bar groups, or null to use a set of default colours.

groupBy

null | stringdefault: null

The custom property that defines item grouping, or null to disable bar groups.

hiColours

string(Colour)[] | nulldefault: null

Colours to use for bar groups when highlighted, or null to calculate highlight colours based on the bar group colours.

heightChange

HeightChange

Options controlling the animation of height changes for stacked histogram bars and selection lines.

animate

booleandefault: true

Whether height changes should be animated.

time

numberdefault: 200

If animated, the time the animation should take, in milliseconds.

histogram

Histogram

Options for the histogram bars.

colour

string(Colour)default: 'light grey'

The colour of the histogram bars.

highlightColour

string(Colour)default: 'grey'

The colour of the histogram bars when they are hovered over.

markColour

string(Colour)default: light red

The colour of histogram bars which contain marked times.

markHiColour

string(Colour)default: 'red'

The colour of the marked histogram bars when they are hovered over.

locale

Locale

Specifies how dates and times are displayed.

ampm

string[]default: ['AM', 'PM']

An array of two strings giving the text for AM and PM for 12-hour clock times and 2 more optional strings, used to label time bar intervals for the first and second halves of days.

h12

booleandefault: true

Whether a 12-hour clock should be used to display times. If false, a 24-hour clock is used.

half

stringdefault: 'H'

A prefix used to indicate halves of years.

longMonths

string[]default: ['January', etc]

An array of strings giving the full names of the months, starting with January.

order

"dmy" | "mdy"default: 'mdy'

A string controlling the order of dates:

  • 'dmy' - day-month-year
  • 'mdy' - month-day-year

quarter

stringdefault: 'Q'

A prefix used to indicate quarters of years.

shortMonths

string[]default: ['Jan', etc]

An array of strings giving abbreviated names of the months, starting with January.

maxRange

string | MaxRangedefault: 'auto'

Specifies the time range at the time bar's maximum zoom level, for example with a maxRange fixed to { units: 'hour', value: 6 } the time bar will not zoom out beyond six-hour intervals.

This is useful if your dataset spans a large time range and you want to limit the amount of data visible.

By default, KeyLines calculates the range between the data's earliest and latest dates/times and multiplies it by two.

units

"year" | "month" | "week" | "day" | "hour" | "min" | "sec"

The unit of the maximum range.

value

number

The size of the maximum range, in the units specified.

minScale

MinScale

Specifies the time interval at the time bar's minimum scale level, for example with a minScale fixed to { units: 'hour', value: 6 } the time bar will not zoom in beyond six-hour intervals.

This can be useful when the data has no precise information about the hour or the minute of the event to stop zooming further. The default behaviour scales with the range of the data.

units

"year" | "month" | "week" | "day" | "hour" | "min" | "sec"default: 'sec'

The unit of the minimum scale level.

value

numberdefault: 1

The number of the specified units.

playSpeed

numberdefault: 60

The speed that the time bar moves at when playing, in pixels per second. May be negative to animate backwards in time in 'normal' mode, or to animate the right hand slider moving backwards in time in 'extend' mode.

scale

Scale

Options for the minor and major time scales.

highlightColour

string(Colour)default: 'light grey'

The colour of the time scale section that is hovered over.

showMajor

booleandefault: true

Whether the major time scale (the lower scale) is shown.

showMinor

booleandefault: true

Whether the minor time scale (the higher scale) is shown.

showControlBar

booleandefault: true

Whether the control bar at the base of the time bar is shown.

showExtend

booleandefault: false

Whether the extend button is displayed.

showFit

booleandefault: true

Whether the fit button is displayed.

showPlay

booleandefault: true

Whether the play button is displayed.

sliderColour

string(Colour)default: 'white', 0.6 opacity

The colour of the the slider.

sliderLineColour

string(Colour)default: 'grey'

The colour of the bars at the inner edge of the slider.

sliders

"fixed" | "none" | "free"default: 'fixed'

Sets the slider behaviour. If set to 'fixed', the slider width is fixed to 25% of the view area and the slider animates back to this width after each drag and drop. If set to 'free', sliders can be dragged and dropped freely. Setting to 'none' hides the sliders. Setting this option changes the visual effects when timebar.range() is called.

type

"area" | "histogram"default: 'histogram'

Whether the time bar should display as a series of rectangular histogram bars or as a smooth area plot.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.