React Charts: Themes Reference

Themes are used for configuring the appearance of charts. They can help simplify the chart options and avoid duplication if a consistent style is required across multiple charts.

A theme can be provided to a chart by specifying an inbuilt theme name or a custom AgChartTheme instance in the options object.

For ease of use, The AgChartTheme interface is displayed in an interactive, expandable JSON structure below.

options: {
...
theme: {
 This object is used to define the configuration for a custom chart theme. 
baseTheme?: 'ag-default' | 'ag-default-dark' | 'ag-material' | 'ag-material-dark' | 'ag-pastel' | 'ag-pastel-dark' | 'ag-solar' | 'ag-solar-dark' | 'ag-vivid' | 'ag-vivid-dark'; 
palette?: AgChartThemePalette { ... }; 
overrides?: AgChartThemeOverrides {  Configuration from this object is merged over the defaults specified in the base theme. 
cartesian?: AgCartesianThemeOptions<AgCartesianSeriesTheme> { ... }; 
column?: AgCartesianThemeOptions<AgBarSeriesOptions> { ... }; 
bar?: AgCartesianThemeOptions<AgBarSeriesOptions> { ... }; 
line?: AgCartesianThemeOptions<AgLineSeriesOptions> { ... }; 
area?: AgCartesianThemeOptions<AgAreaSeriesOptions> { ... }; 
scatter?: AgCartesianThemeOptions<AgScatterSeriesOptions> { ... }; 
histogram?: AgCartesianThemeOptions<AgHistogramSeriesOptions> { ... }; 
polar?: AgPolarThemeOptions<AgPolarSeriesTheme> { ... }; 
pie?: AgPolarThemeOptions<AgPieSeriesOptions> { ... }; 
hierarchy?: AgHierarchyThemeOptions<AgHierarchySeriesTheme> { ... }; 
treemap?: AgHierarchyThemeOptions<AgHierarchySeriesOptions> { ... }; 
common?: any; 
}; 
}
}

You can find more details about AG Charts themes in the Themes section.