Angular Data GridChart Customisation

Integrated Charts can be customised via the AG Charts Theme API.

Provided Themes Copy Link

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.

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 Copy Link

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'
        }
    }
};

Common Overrides Copy Link

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 Copy Link

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 Copy Link

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.

Formatting Copy Link

Chart values can be formatted in several different ways.

Label Formatting Copy Link

Custom label formatting can be applied to the chart axes by providing suitable formatters.

<ag-grid-angular
    [chartThemeOverrides]="chartThemeOverrides"
    /* other grid options ... */ />

this.chartThemeOverrides = {
    common: {
        axes: {
            number: {
                label: {
                    formatter: function(params) {
                        // prefix with dollar sign
                        return '$' + params.value;
                    },
                },
            },
        },
    },
};

The example below shows:

• A custom label formatter being used with the vertical axis to display SI units for the data. Additionally, this example demonstrates the use of the domain property passed through to the formatter to provide a consistent scale across the value range.
• A custom title formatter using boundSeries property passed through to the formatter for the vertical axis to display which series the axes are representing.

For more information on the formatter property for axes labels, see AG Charts Axis Labels Label Text Formatting.

Global Formatter Copy Link

A single, top‑level formatter can be used to control the text for every label‑bearing element, e.g. axes, series labels, legend items, callouts, etc. The formatter will run for each element, unless that element defines its own formatter.

The callback receives the similar params object provided to element‑level formatters, providing access to properties such as value, type, and elementId. See the AG Charts API Reference for more information.

<ag-grid-angular
    [chartThemeOverrides]="chartThemeOverrides"
    /* other grid options ... */ />

this.chartThemeOverrides = {
    common: {
        formatter: (params) => {
            if (params.type === 'number') {
                return `£${params.value}`;
                // prefix with `£` sign
            }
            const gridApi = params.context.api;
            // do something with the grid API
        }
    }
};

The example below shows a global formatter that prefixes all number values with a £ symbol.

The order of formatting is as follows:

1. Element‑specific label.formatter (axis, series, legend, callout, etc.)
2. Global formatter
3. Default AG Charts formatting rules

Accessing Grid Context in Formatters Copy Link

The grid will pass the grid API and context into the context property of the formatter parameters.

For formatters that are directly linked to row data, the row node will be passed in the datum.node property (note that datum may be undefined).

For formatters related to columns, the key property will usually contain the column ID. In some instances this will be in the key property of the corresponding series in the boundSeries property.

In the example below, the global formatter is used to access the valueFormatter in each of the columns:

• The x axis uses the Financial Period column value formatter.
• The y axis does not use a formatter as it belongs to multiple columns.
• The tooltip (when mousing over the series) uses the value formatters from each of the three columns.

Next Up Copy Link

Continue to the next section to learn about Chart Events.