JavaScript 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 theme for the grid (e.g. ag-theme-quartz-dark
), dark equivalents of the chart themes are provided by
default instead, named with a -dark
suffix, e.g. 'ag-vivid-dark'
.
The selected theme can be changed by the user via the Settings Tool Panel or
by changing the order of the provided themes using the chartThemes
grid option as shown below:
const gridOptions = {
chartThemes: ['ag-vivid', 'ag-polychroma', 'ag-material', 'ag-sheets', 'ag-default'],
// other grid options ...
}
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 gridOptions = {
chartThemeOverrides: {
common: {
title: {
fontSize: 22,
fontFamily: 'Arial, sans-serif'
}
}
},
// other grid options ...
}
Note that the chartThemeOverrides
grid option maps to AG Charts Theme Overrides.
The following sections show different types of chart and series overrides.
Common Overrides
These overrides can be used with any series type. For full list of overrides see Common Overrides.
Line Overrides
These overrides are specific to the AG Charts Line Series. For full list of overrides see Line Overrides.
Bar Overrides
These overrides are specific to the AG Charts Bar Series. For full list of overrides see Bar Overrides.
Area Overrides
These overrides are specific to the AG Charts Area Series. For full list of overrides see Bar Overrides.
Scatter Overrides
These overrides are specific to the AG Charts Scatter Series. For full list of overrides see Scatter Overrides.
Pie Overrides
These overrides are specific to the AG Charts Pie Series. For full list of overrides see Pie Overrides.
Custom Chart Themes
Custom AG Charts Themes can also be supplied to the grid via the customChartThemes
grid option.
const gridOptions = {
customChartThemes: {
myCustomTheme: {
palette: {
fills: ['#42a5f5', '#ffa726', '#81c784'],
strokes: ['#000000', '#424242'],
},
overrides: {
common: {
background: {
fill: '#f4f4f4',
},
legend: {
item: {
label: {
color: '#333333',
},
},
},
},
},
},
chartThemes: ['myCustomTheme', 'ag-vivid'],
},
// other grid options ...
}
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.