Search

React Data GridChart Customisation

Enterprise

Integrated Charts can be customised via the AG Charts Theme API.

Provided Themes

The following themes are provided to Integrated Charts by default.

['ag-default', 'ag-material', 'ag-sheets', 'ag-polychroma', 'ag-vivid']

These themes correspond to AG Charts Base Themes.

When using a dark color scheme for the grid, the application must provide the dark equivalents of the chart themes. If a default AG Chart theme is used, the dark themes are named with a -dark suffix, e.g. 'ag-vivid-dark'.

The selected theme can be changed by the user via the Chart Tool Panel or by changing the order of the provided themes using the chartThemes grid option as shown below:

const chartThemes = ['ag-vivid', 'ag-polychroma', 'ag-material', 'ag-sheets', 'ag-default'];

<AgGridReact chartThemes={chartThemes} />

Overriding Themes

Integrated Charts uses a theme based configuration which 'overrides' the theme defaults.

To override a charts theme, use the chartsThemeOverrides grid option.

const chartThemeOverrides = useMemo(() => { 
	return {
        common: {
            title: {
                fontSize: 22,
                fontFamily: 'Arial, sans-serif'
            }
        }
    };
}, []);

<AgGridReact chartThemeOverrides={chartThemeOverrides} />

Note that the chartThemeOverrides grid option maps to AG Charts Theme Overrides.

Common Overrides

These overrides can be used with any series type. For full list of overrides see Common Overrides in the AG Charts documentation.

Chart-specific Overrides

The following documentation links describe different types of overrides specific to individual AG Charts series types.

Custom Chart Themes

Custom AG Charts Themes can also be supplied to the grid via the customChartThemes grid option.

const customChartThemes = useMemo(() => { 
	return {
        myCustomTheme: {
            palette: {
                fills: ['#42a5f5', '#ffa726', '#81c784'],
                strokes: ['#000000', '#424242'],
            },
            overrides: {
                common: {
                    background: {
                        fill: '#f4f4f4',
                    },
                    legend: {
                        item: {
                            label: {
                                color: '#333333',
                            },
                        },
                    },
                },
            },    
        },
        chartThemes: ['myCustomTheme', 'ag-vivid'],
    };
}, []);

<AgGridReact customChartThemes={customChartThemes} />

The example below shows a custom chart theme being used with the grid. Note that other provided themes can be used alongside a custom theme, and are unaffected by the settings in the custom theme.

Next Up

Continue to the next section to learn about Chart Events.