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);