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
), 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:
<ag-grid-angular
[chartThemes]="chartThemes"
/* other grid options ... */ />
this.chartThemes = ['ag-vivid', 'ag-polychroma', 'ag-material', 'ag-sheets', 'ag-default'];
Overriding Themes
Integrated Charts uses a theme based configuration which 'overrides' the theme defaults.
To override a charts theme, use the chartsThemeOverrides
grid option.
<ag-grid-angular
[chartThemeOverrides]="chartThemeOverrides"
/* other grid options ... */ />
this.chartThemeOverrides = {
common: {
title: {
fontSize: 22,
fontFamily: 'Arial, sans-serif'
}
}
};
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.
- Line Overrides
- Bar Overrides
- Area Overrides
- Scatter Overrides
- Pie Overrides
- Radar Line Overrides
- Radar Area Overrides
- Nightingale Overrides
- Radial Column Overrides
- Radial Bar Overrides
- Range Bar Overrides
- Range Area Overrides
- Box Plot Overrides
- Waterfall Overrides
- Heatmap Overrides
- Treemap Overrides
- Sunburst Overrides
Custom Chart Themes
Custom AG Charts Themes can also be supplied to the grid via the customChartThemes
grid option.
<ag-grid-angular
[customChartThemes]="customChartThemes"
/* other grid options ... */ />
this.customChartThemes = {
myCustomTheme: {
palette: {
fills: ['#42a5f5', '#ffa726', '#81c784'],
strokes: ['#000000', '#424242'],
},
overrides: {
common: {
background: {
fill: '#f4f4f4',
},
legend: {
item: {
label: {
color: '#333333',
},
},
},
},
},
},
chartThemes: ['myCustomTheme', 'ag-vivid'],
};
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.