Timeline

new Timeline(element, paramsopt)

Parameters:

Name	Type	Attributes	Default	Description
element	string			css query selector of the container dom element into which the chart is placed.
params	Object	<optional>		options.
lineHeight	Object	<optional>	25	the hight of a bar in a timeline in px.
scale	Object	<optional>		options for the scale at the top of the timelines
scale.from	number	<optional>	0	the time in minutes at which the timeline should start.
scale.to	number	<optional>	1440	the time in minutes at which the timeline should end.
scale.interval	number	<optional>	240	the interval at which labels are shown on the scale.
scale.intervalStart	number	<optional>	0	the point at which the interval starts counting.
data	array	<optional>		the data to be displayed.
data.timelines	Array.<Object>	<optional>		each object represents one timeline. For multiple timelines under each other, have multiple objects.
data.timelines[].label	string	<optional>		the label to the right of the timeline.
data.timelines[].values	Array.<Object>			the values (marked time slots).
data.timelines[].values[].start	number			the point at which the time slot starts in minutes.
data.timelines[].values[].length	number			the point at which the time slot ends in minutes.
data.timelines[].values[].title	string	<optional>		the title of the time slot.
data.timelines[].colors	Array.<string>	<optional>	['#7cd6fd', '#5e64ff', '#743ee2', '#ff5858', '#ffa00a', '#feef72', '#28a745', '#98d85b', '#b554ff', '#ffa3ef', '#36114C', '#bdd3e6', '#f0f4f7', '#b8c2cc']	the colors for the timeline.
padding	Object	<optional>		padding in all directions of the chart.
padding.top	number | string	<optional>		top padding for the chart.
padding.right	number | string	<optional>		right padding for the chart.
padding.bottom	number | string	<optional>		bottom padding for the chart.
padding.left	number | string	<optional>		left padding for the chart.
colors	Object	<optional>		custom colors
colors.background	string	<optional>	"#E3E6E9"	the color of the background of the bars (not the color of background of the whole chart).
colors.text	string	<optional>	"black"	the color of the text.
round	string	<optional>	true	if the timeline is round.
font	string	<optional>	'Roboto'	the font for all writing. Font must be imported separately.
hover	Object	<optional>		options for the hover effect.
hover.visible	boolean	<optional>	true	whether the titles should be shown on hover or not.
hover.callback	function	<optional>		function that returns html that is displayed in the hover effect. Receives (title, start, end).
legend	Object	<optional>		options for the legend.
legend.visible	boolean	<optional>	true	whether a legend should be shown underneath the timelines.
legend.distance	number	<optional>	15	distance from the last timeline to the legend in px. Always set to 0 if params.legend.visible === false.
legend.textColor	number	<optional>	"white"	the color of the text in the legend.
legend.textWidth	number	<optional>	"variable"	distance between the legend text and the legend.
distance	'variable' | number	<optional>	'variable'	whether the distance between timelines should be variable (based on svg size) or a fixed number of px.
adjustSize	boolean	<optional>	false	whether the size of the container should be adjusted based on the needed space. Only works if params.distance != 'variable'.

View Source index.js, line 982