JavaScript 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.
• params - The theme parameters to set global styles.

See the Themes API page for the complete options structure.

Theme Parameters

The params object is used to set styles across the whole chart in one place.

const myTheme: AgChartTheme = {
    params: {
        fontFamily: 'Georgia, serif',
        fontSize: 16,
    },
};

In the above example:

• All text elements are set to the same font family.
• All text, except the titles and footer, are set to the same font size.

Overrides

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.

const 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

const myTheme: AgChartTheme = {
    palette: {
        fills: ['#5C2983', '#0076C5', '#21B372', '#FDDE02', '#F76700', '#D30018'],
        strokes: ['#881008'],
    },
    params: {
        backgroundColor: '#FFE8E0',
        foregroundColor: '#881008',
        fontFamily: 'Georgia, serif',
        fontSize: 16,
        gridLineColor: '#881008',
    },
    overrides: {
        common: {
            title: {
                fontSize: 24,
            },
            padding: {
                left: 70,
                right: 70,
            },
            axes: {
                category: {
                    line: {
                        width: 4,
                    },
                },
                number: {
                    line: {
                        width: 2,
                    },
                },
            },
        },
        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: ['#881008'],
                },
            },
        },
    },
};

In the above example:

• A different palette of colours and strokes is provided for all series to use.
• Some param global styles are specified.
• 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.