Vue 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).
• palette - The palette to use, replaces the palette of the base theme.
• params - The theme parameters to set global styles.
• overrides - The object to be merged with the base theme's defaults and override them.

See the Themes API page for the complete options structure.

Palette

A palette is the array of colours used for the data, for example the bars in a bar series chart.

If there are more groups of data than colours in the palette, the colours will be repeated.

const myTheme = {
    palette: {
        fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
};

Parameters

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

• Set the font with fontFamily and fontSize.
• Use foregroundColor, backgroundColor and accentColor to set the main colours on the chart. All other colours will default to a mix of these three.
• Use chromeBackgroundColor and chromeTextColor to adjust tooltips, menus, dialogs, toolbars, buttons and text inputs.

const myTheme = {
    palette: {
        fills: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
    params: {
        foregroundColor: '#262a33',
        backgroundColor: '#fff1e5',
        accentColor: '#0d7680',
        chromeBackgroundColor: '#fff7ef',
        chromeTextColor: '#262a33',
        fontFamily: 'Georgia, serif',
        fontSize: 14,
    },
};

In the above example:

• The three main colours are defined with some additional specific colours for chrome elements.
• 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: ['#006f9b', '#ff7faa', '#00994d', '#ff8833', '#00a0dd'],
        strokes: ['#003f58', '#934962', '#004a25', '#914d1d', '#006288'],
    },
    params: {
        foregroundColor: '#262a33',
        backgroundColor: '#fff1e5',
        accentColor: '#0d7680',
        chromeBackgroundColor: '#fff7ef',
        chromeTextColor: '#262a33',
        fontFamily: 'Georgia, serif',
        fontSize: 14,
    },
    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.