API Documentation

kairoi - API Documentation

Constructor

var timeline = new Kairoi(target, [options:Object]);

where:

• target: is the target element (usually a div). This argument is mandatory
• options: see options

Options

There are many options that you can customize.

option	default	description
margin	{left: 40, right: 20, top: 20, bottom: 20}	margin for the chart area (more like a padding)
initialWidth	1200	chart width including margin
initialHeight	80	chart height including margin
scale	d3.scaleTime()	Can specify other type of scale e.g. d3.scaleLinear()
domain	undefined	If set, will set domain of the scale to this value. Otherwise, the domain will be calculated from the extent of data.
direction	'up'	location of the labels relative to the axis
formatAxis	axis => axis	customize the axis before drawing, such as axis => axis.ticks(0) to hide all the ticks
keyFn	undefined	identifier function for each data point. (d, i) => ...
timeFn	d => d.date	accessor function for time of each data point. (d, i) => ...
textFn	d => d.label	accessor function for text of each data point. (d, i) => ...
labella	{}	options for Labella.js layout. See Labella.js documentation for more details. For example, to set maxixum position for the labels to 500, set this option to {maxPos: 500}
layerGap	60	distance from axis to the first layer of labels and between each layer of labels (in situations where all labels cannot fit within one layer)
dotRadius	3	radius of the dots. It can be a Number or Function (d, i) => ...
dotColor	#222	color of the dots. It can be a color value or Function (d, i) => ...
labelBgColor	#222	color of the label background. It can be a color value or Function (d, i) => ...
labelTextColor	#fff	color of the label text. It can be a color value or Function (d, i) => ...
linkColor	#222	color of the paths that link dots to labels. It can be a color value or Function (d, i) => ...
labelPadding	{left: 4, right: 4, top: 3, bottom: 2}	space to add around the text within each label
textYOffset	0.85em	vertical offset for text within label
labelTextStyle	null	style for label text. It must be an object with style field as key

Functions

data()

Get/Set data for the timeline. Please note that does not trigger a re-draw of the timeline

draw()

Draw the timeline inside the target element.