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.