Time Bar Props
object Controls animations on the Time Bar.
string If the Time Bar receives a className, it will not apply any default styles. We recommend styling the Time Bar's parent element, rather than passing a className to the Time Bar itself.
array of objects Highlights a time or range of times in the Time Bar using the color defined in the highlightColor option.
<TimeBar
highlight={[
new Date(),
{
start: Date.now() + 1000 * 60 * 60,
end: Date.now() + 3 * 1000 * 60 * 60
}
]}
/> [id: string]: Node | Link An indexed list of all the items in the Time Bar. Each item must have a times property. See the Item data format.
Value
An object describing a node or link.
'smooth' | 'histogram'
default: 'histogram' Sets the display mode of the Time Bar to show histogram bars, or a smooth line with shaded area.
object Specifies options on the Time Bar. See Time Bar Options.
boolean
default: false Indicates whether the Time Bar is playing.
object Specifies the visible range of the Time Bar.
[id: string]: boolean Draws a selection line for items with truthy values in the supplied object, or multiple lines if multiple objects are supplied in an array. The maximum number of selection lines is 3.
<TimeBar
items={items}
selection={[{ node1: true }, { node2: true }]}
/>Value
A truthy value indicates that an item should be included in the selection line.
string | array of strings
default: 'sunset red', 'dark green' and 'orange' Indicates the colors to use for any selection lines drawn.
<TimeBar
items={items}
selection={[{ node1: true }, { node2: true }]}
selectionColor={["blue", "red"]}
/> object Standard styling properties for the element. We recommend styling the Time Bar's parent element, not the Time Bar itself. Default is:
{
position: 'relative',
height: '100%',
minHeight: '100px',
width: '100%',
}