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:

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

Playground