React ChartsThemes

Themes allow you customise the appearance of your charts. They provide defaults for different properties of the chart that will be used unless overridden by the chart options.

Using Stock Themes

Every chart uses the 'ag-default' theme unless configured otherwise.

AgCharts.create({
    theme: 'ag-default', // optional, implied
    //...
});

The following themes are provided out-of-the-box:

type AgChartThemeName =
    | 'ag-default'
    | 'ag-default-dark'
    | 'ag-sheets'
    | 'ag-sheets-dark'
    | 'ag-polychroma'
    | 'ag-polychroma-dark'
    | 'ag-vivid'
    | 'ag-vivid-dark'
    | 'ag-material'
    | 'ag-material-dark';

In the example below, you can click the buttons to change the theme used in the chart.

Making Custom Themes

You can create your own theme, which builds upon an existing theme and allows you to change as many or as few properties as you like.

A custom theme is an object with the following optional properties:

• baseTheme - The name of the theme to base this theme upon (if not specified, the 'ag-default' theme is used).
• overrides - The object to be merged with the base theme's defaults and override them.
• palette - The palette to use, replaces the palette of the base theme.

See the Themes API page for the complete options structure.

The overrides object is similar in its structure to the chart's options and is used as follows:

• Items in the overrides.common object are applied to all chart types.
• Items in the series specific object (e.g. overrides.line), are applied to charts of that series type.
• Series specific properties are found in the series object of the series type (e.g. overrides.line.series).
• The axes config contains one object for each axis type.

var myTheme = {
    palette: {
        fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'],
        strokes: ['black'],
    },
    overrides: {
        common: {
            title: {
                fontSize: 24,
            },
        },
        bar: {
            series: {
                label: {
                    enabled: true,
                    color: 'black',
                },
                strokeWidth: 1,
            },
        },
    },
};

In the above example:

• A different palette of colours and strokes is provided for all series to use.
• The font size of the title is increased.
• The bar series has specific label and stroke options set.

Advanced Custom Theme

var myTheme: AgChartTheme = {
    palette: {
        fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'],
        strokes: ['gray'],
    },
    overrides: {
        common: {
            title: {
                fontSize: 24,
            },
            padding: {
                left: 70,
                right: 70,
            },
            axes: {
                category: {
                    line: {
                        stroke: 'gray',
                    },
                    tick: {
                        stroke: 'gray',
                    },
                },
                number: {
                    line: {
                        stroke: 'gray',
                    },
                    tick: {
                        stroke: 'gray',
                    },
                },
            },
        },
        line: {
            series: {
                marker: {
                    shape: 'circle',
                },
            },
        },
        bar: {
            series: {
                label: {
                    enabled: true,
                    color: 'white',
                },
            },
        },
        pie: {
            padding: {
                top: 40,
                bottom: 40,
            },
            legend: {
                position: 'left',
            },
            series: {
                calloutLabel: {
                    enabled: true,
                },
                calloutLine: {
                    colors: ['gray'],
                },
            },
        },
    },
};

In the above example:

• A different palette of colours and strokes is provided for all series to use.
• Some common overrides are specified which apply to all chart types.
• Different axes overrides are specified for category and number axes types.
• Different series specific overrides are specified for bar, line and pie series.