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:
The following themes are provided out-of-the-box:
Example: Stock Themes
In the example below, you can click the buttons to change the theme used in the chart. Notice how changing from
one theme to another is a simple matter of changing the
theme property on the original
options object and passing it to
along with the chart instance.
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 properties:
baseTheme- the name of the theme to base this theme upon (optional; if not specified, the
'ag-default'theme is used)
defaults- the object to be merged with the base theme's defaults and override them (optional)
palette- the palette to use, replaces the palette of the base theme (optional)
defaults object is similar in its structure to the chart's options, with two noteworthy exceptions:
seriesconfig is an object that maps each series type to its config
axesconfig is an object that maps each axis type to its config
For example, the following snippet demonstrates a custom theme that uses the
'ag-default-dark' theme as
the base to inherit the dark background and bright strokes, but substitutes the palette and changes some fonts, as
well as a few other options.
Example: Custom Theme
The theme shown in the above snippet is applied to the chart in the example below:
Example: Advanced Theme
This example demonstrates a more advanced theme, providing different settings for different series and axis types.
Continue to the next section to learn more about the navigator component.