Appearance

You can configure the appearance of the data grid: set the background and header 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 dataGrid() with the following methods:

• backgroundFill() to set the background fill
• headerFill() to set the fill of the header
• 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 Timeline: Appearance to learn how to configure the appearance of the timeline.

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 data grid:

// configure the visual settings of the data grid
var dataGrid = chart.dataGrid();
dataGrid.rowEvenFill("gray 0.3");
dataGrid.rowOddFill("gray 0.1");
dataGrid.rowHoverFill("#ffd54f 0.3");
dataGrid.rowSelectedFill("#ffd54f 0.3");
dataGrid.columnStroke("2 #64b5f6");
dataGrid.headerFill("#64b5f6 0.2");