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:
stringdefault: 'white'The color to set the background of the Time Bar.
numberdefault: 250The minimum interval between onChange events in milliseconds.
objectOptions controlling animation of height changes for histogram bars and selection lines.
objectOptions to control the appearance of labels on the Time Bar (used in the scales).
stringdefault: 'gray'The color to set the font of the Time Bar.
stringdefault: '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.
numberdefault: 12The font size to use. There is no size limit, but most fonts look better if you use a value between 7 and 13.
objectSpecifies how dates and times are displayed.
array of stringsdefault: ['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.
booleandefault: trueA flag indicating whether the 12-hour clock should be used to display times. If false, the 24-hour clock is used.
stringdefault: 'H'A prefix used to indicate halves of years.
array of stringsdefault: ['January', etc]An array of strings giving the full names of the months, starting with January.
stringdefault: 'mdy'A string controlling the order of dates. Supported values are 'dmy' for day-month-year, and 'mdy' for month-day-year.
stringdefault: 'Q'A prefix used to indicate quarters of years.
array of stringsdefault: ['Jan', 'Feb', ...etc]An array of strings giving abbreviated names of the months, starting with January.
numberdefault: 60The speed that the Time Bar moves at when playing, in pixels per second. May be negative to animate backwards.
objectOptions for the minor and major time scales.
stringdefault: 'light gray'The color of the time scale section that is hovered over.
booleandefault: trueWhether the major time scale (the lower scale) is shown.
booleandefault: trueWhether the minor time scale (the higher scale) is shown.
objectOptions to control the appearance of the sliders to the left and right of the histogram bars.
objectSpecifies how to create stacked bars.
by
requiredstringSplits 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} />IndexA 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} />objectControls the appearance of histogram bars and smooth areas.
stringdefault: 'light gray'The color of the histogram bars or smooth area line.
stringdefault: 'light red'The color of histogram bars which contain highlighted times. Only available in histogram mode.
stringdefault: 'red'The color of the highlighted histogram bars when they are hovered over. Only available in histogram mode.
stringdefault: 'gray'The color of the histogram bars when they are hovered over. Only available in histogram mode.
objectSpecifies the bounds within which the user can zoom.
ZoomExtentSets 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.
ZoomExtentSets 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.