Appearance

You can configure the appearance of the timeline: set the background fill, the stroke of columns, etc. It is possible to apply the same color to all rows or different colors to odd and even rows.

Combine getTimeline() with the following methods:

backgroundFill() to set the background fill
rowFill() to set the fill of rows
rowHoverFill() to set the fill of rows when they are being hovered over
rowSelectedFill() to set the fill of rows when they are being selected
rowEvenFill() to set the fill of even rows
rowOddFill() to set the fill of odd rows
columnStroke() to set the stroke of columns

Note 1: See also Data Grid: Appearance to learn how to configure the appearance of the data grid.

Note 2: The Basic Settings: Background and Basic Settings: Rows and Columns sections explain how to apply some appearance settings simultaneously to the data grid and timeline. Please note that this is the only way to set the row stroke.

The sample below shows how to adjust the appearance of the timeline:

// configure the visual settings of the timeline
var timeline = chart.getTimeline();
timeline.rowEvenFill("gray 0.3");
timeline.rowOddFill("gray 0.1");
timeline.rowHoverFill("#ffd54f 0.3");
timeline.rowSelectedFill("#ffd54f 0.3");
timeline.columnStroke(null);

Playground