Themes

Themes can be used to apply a collection of settings to chart's elements easily, with a a single line of code.

Loading

amCharts 5 comes with a few themes you can load and use. They are located in /themes directory, and can be loaded as a module or script file:

import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import am5themes_Micro from "@amcharts/amcharts5/themes/Micro";
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Micro.js"></script>

Theme list

Theme nameComment
AnimatedUsing will turn on animations on chart, including zoom, fading in and out, color cross-fades, etc.
DarkA theme suitable for dark backgrounds.
DatavizA theme that adds alternative default colors.
FrozenA "cold" color-oriented theme.
KellyA theme that uses highly-contrasting colors.
MaterialA theme that uses Material design color palette.
MicroA theme for creating "micro charts" - charts stripped down to a bare minimum (no labels, axes, etc.). Suitable creating charts with very minimal space requirements.
MoonriseA theme that adds alternative default colors.
ResponsiveA theme that can be used to enable responsive features of the chart - adapting settings based on available space. More info here.
SpiritedA theme that adds alternative default colors.

Applying

Each chart can have multiple themes applied to it.

To apply theme(s) to a chart, we use setThemes() method of its root element, supplying instances of the theme, created with their new() method:

root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Micro.new(root)
]);
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Micro.new(root)
]);

NOTE The order of the themes is important. If two themes set the same setting, the last theme's value will be used.

Relation to settings

We can think of themes as collection of defaults.

They will not override the values of the settings, set by user code.

Quick custom theme

All elements in the chart are loaded with default setting values. They come from a "default theme".

While we cannot modify default theme directly, we can create a quick theme that overrides certain rules from a default theme.

It works by instantiating an instance of Theme class, as well as adding custom rules to it.

const myTheme = am5.Theme.new(root);

myTheme.rule("Label").setAll({
  fill: am5.color(0xFF0000),
  fontSize: "1.5em"
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);
var myTheme = am5.Theme.new(root);

myTheme.rule("Label").setAll({
  fill: am5.color(0xFF0000),
  fontSize: "1.5em"
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

The above will force all labels to be red and sized at 1.5em.

For more information on how to target elements, as well specify their setting values, refer to "Rules" section of our "Creating themes" tutorial.

Creating themes

The limitation of the above approach is that the quick theme cannot be reused across multiple charts.

If you need to create a full-fledged reusable theme, amCharts 5 provides a rally easy and powerful way to it.

Themes allow targeting elements via a variety of queries to set their settings, events, and adapters.

For information on how to create your own custom themes refer to the "Creating themes" tutorial.

Additional info