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.
Options controlling the time bar when type is set to 'area'.
string(Colour)
default: 'white' The colour to use for the background of the time bar.
number
default: 250 The minimum interval between change events in milliseconds.
"light" | "dark"
default: 'light' The colour theme of the time bar's control bar.
string(Colour)
default: 'grey' The colour to set the font of the time bar (used in the scales).
string
default: 'sans-serif' The default font family to use, for example, 'sans-serif'.
number
default: 12 The font size to use. There is no size limit, but most fonts look best with a value between 7 and 13.
Options controlling the grouping within histogram bars.
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 to use for bar groups, or null to use a set of default colours.
null | string
default: null The custom property that defines item grouping, or null to disable bar groups.
Options controlling the animation of height changes for stacked histogram bars and selection lines.
Options for the histogram bars.
Specifies how dates and times are displayed.
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.
boolean
default: true Whether a 12-hour clock should be used to display times. If false, a 24-hour clock is used.
string
default: 'H' A prefix used to indicate halves of years.
string[]
default: ['January', etc] An array of strings giving the full names of the months, starting with January.
"dmy" | "mdy"
default: 'mdy' A string controlling the order of dates:
- 'dmy' - day-month-year
- 'mdy' - month-day-year
string
default: 'Q' A prefix used to indicate quarters of years.
string[]
default: ['Jan', etc] An array of strings giving abbreviated names of the months, starting with January.
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.
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.
number
default: 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.
Options for the minor and major time scales.
string(Colour)
default: 'light grey' The colour of the time scale section that is hovered over.
boolean
default: true Whether the major time scale (the lower scale) is shown.
boolean
default: true Whether the minor time scale (the higher scale) is shown.
boolean
default: true Whether the control bar at the base of the time bar is shown.
boolean
default: false Whether the extend button is displayed.
boolean
default: true Whether the fit button is displayed.
boolean
default: true Whether the play button is displayed.
string(Colour)
default: 'white', 0.6 opacity The colour of the the slider.
string(Colour)
default: 'grey' The colour of the bars at the inner edge of the slider.
"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.
"area" | "histogram"
default: 'histogram' Whether the time bar should display as a series of rectangular histogram bars or as a smooth area plot.