Chart themes can be used to customise the look and feel of your charts to match your application.
ag-Charts support Chart Themes to change how charts are styled. There are a number of chart themes provided out of the box by the grid. You can also provide your own custom chart theme to the grid to customise the colours of charts along with other styling options. Alternatively, you can just provide overrides to tweak the provided chart themes in the way you want.
There are five chart themes that are provided by the grid:
'ag-solar'. When using a dark theme for the grid
ag-theme-alpine-dark), dark equivalents of the chart themes are provided by default instead,
named with a
-dark suffix, e.g.
When you create a chart, you can scroll through the different available themes in the chart settings.
You can change which themes are available by setting the
chartThemes property in
gridOptions. The example below shows a different selection of themes configured in this way.
Custom Chart Themes
You can create your own chart theme and provide it to the grid in the
customChartThemes map on
gridOptions. Your theme should then be specified in
chartThemes to make it available to
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.
Overriding Existing Themes
Instead of providing a whole custom chart theme, you can instead supply just a set of theme overrides. These will be applied on top of every available theme. This can be useful for tweaking the style of your charts without having to provide a whole theme, or to make changes across multiple themes.
The following examples show different types of chart being customised using theme overrides.
Example: Common Chart Overrides
These overrides can be used with any chart type.
Example: Cartesian Chart Overrides
These overrides can be used with any cartesian chart.