Time Bar Options
You can set various options and defaults on the time bar by setting the options prop.
<TimeBar
options={{
backgroundColor: 'rgb(60, 60, 60)',
style: {
color: 'blue',
hoverColor: 'red'
}
}}
/>The options prop accepts an object with the following format:
string
default: 'white' The color to set the background of the Time Bar.
number
default: 250 The minimum interval between onChange events in milliseconds.
object Options controlling animation of height changes for histogram bars and selection lines.
object Options to control the appearance of labels on the Time Bar (used in the scales).
string
default: 'gray' The color to set the font of the Time Bar.
string
default: 'sans-serif' The default font family to use, such as 'arial' or 'helvetica'. If the font isn't supported by the browser, or if none is set, 'sans-serif' is used.
number
default: 12 The font size to use. There is no size limit, but most fonts look better if you use a value between 7 and 13.
object Specifies how dates and times are displayed.
array of strings
default: ['AM', 'PM'] An array of two strings giving the text to use for AM and PM when displaying 12-hour clock times. Optionally this array may contain two more strings, which are used to label Time Bar intervals representing the first and second halves of days.
boolean
default: true A flag indicating whether the 12-hour clock should be used to display times. If false, the 24-hour clock is used.
string
default: 'H' A prefix used to indicate halves of years.
array of strings
default: ['January', etc] An array of strings giving the full names of the months, starting with January.
string
default: 'mdy' A string controlling the order of dates. Supported values are 'dmy' for day-month-year, and 'mdy' for month-day-year.
string
default: 'Q' A prefix used to indicate quarters of years.
array of strings
default: ['Jan', 'Feb', ...etc] An array of strings giving abbreviated names of the months, starting with January.
number
default: 60 The speed that the Time Bar moves at when playing, in pixels per second. May be negative to animate backwards.
object Options for the minor and major time scales.
string
default: 'light gray' The color 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.
object Options to control the appearance of the sliders to the left and right of the histogram bars.
string The color to set the sliders. The default is white with an opacity of 0.6.
string
default: 'gray' The color to set the bars at the inner edge of the sliders.
'none' | 'fixed' | 'free'
default: 'fixed' Specifies slider behavior after a drag. Set to 'none' to hide the sliders.
object Specifies how to create stacked bars.
by
required string Splits histogram stacks by this value on an item's data property. Items which don't have a matching property will be grouped into an 'other' stack.
const items = {
a: { times: [Date.now()], data: { country: 'us' } },
b: { times: [Date.now()], data: { country: 'uk' } },
};
const stackOpts = { stack: { by: 'country' }};
return <TimeBar items={items} options={stackOpts} /> Index A dictionary of styles, where each property corresponds to a value for the by property, and its value contains a definition of the styles to be applied to it.
Stacks are stacked vertically upwards following the order of the styles defined in this object. The default time bar styling is used for the 'other' stack, containing items with no matching by value.
const items = {
a: { times: [Date.now()], data: { country: 'us' } },
b: { times: [Date.now()], data: { country: 'uk' } },
};
const stackOpts = {
stack: {
by: 'country',
styles: {
us: { color: 'maroon', hoverColor: 'red' } },
uk: { color: 'navy', hoverColor: 'blue' } },
}
}
};
return <TimeBar items={items} options={stackOpts} /> object Controls the appearance of histogram bars and smooth areas.
string
default: 'light gray' The color of the histogram bars or smooth area line.
string
default: 'light red' The color of histogram bars which contain highlighted times. Only available in histogram mode.
string
default: 'red' The color of the highlighted histogram bars when they are hovered over. Only available in histogram mode.
string
default: 'gray' The color of the histogram bars when they are hovered over. Only available in histogram mode.
object Specifies the bounds within which the user can zoom.
ZoomExtent Sets the maximum zoom level (i.e., the smallest scale that the Time Bar will zoom in to). Note that this sets the smallest allowed scale, although the smallest scale actually realized may be larger.
ZoomExtent Sets the minimum zoom level (i.e., the largest scale that the Time Bar will zoom out to). Note that this value should be larger than that set in the max object, and if left unset, ReGraph calculates the range between the data's earliest and latest times and multiplies it by two.