Themes

Themes in amCharts 4 is much more than just collection of appearance settings. They can change the way chart acts, looks, and event modify and create chart objects. Plus, you can apply several themes to a single chart!

Using themes

A theme is not an ordinary chart's setting. It's a system-wide setting which is applied to all the charts that are created.

Loading a theme

Before a theme can be applied, it needs to be loaded, just like any other resource:

// ... other imports
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
<!-- other includes -->
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>

NOTE In JavaScript, when you load a theme, it will be accessible in handy am4themes_[theme name] object. In TypeScript, you can name imported theme whatever you want, but for the purpose of this and other articles, we're going to name them following the same syntax, e.g. am4themes_animated.

Applying a theme

As mentioned before, a theme is not applied directly to a chart object, but rather to the whole system, which affects all charts that are created afterwards.

To apply a theme we use am4core.useTheme(theme) function.

It takes only one parameter - a reference to a theme object.

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_animated);

Now, any chart object created after useTheme() call, regardless of method of its creation, will have "Animated" theme applied to it.

Multiple themes

amCharts 4 does not limit to a single theme. You can have many useTheme() calls for different themes. This allows you to apply multiple themes to the same chart, so you can mix and match their properties.

For example I want to make my charts nicely animated, as well as use Material color palette. I can go ahead and apply two themes:

// ... other imports
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_material from "@amcharts/amcharts4/themes/material";

// Apply the themes
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_material);

// Create the charts
// ...
<!-- other includes -->
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/material.js"></script>

<script>
// Apply the themes
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_material);

// Create the charts
// ...
</script>

NOTE Themes are applied in the same order as useTheme() was called. If some of the properties set by two themes conflict, the last theme will "have a say".

Other topics

Different themes to different charts

It is possible to apply different themes to different charts on the same document.

To do so, follow this mantra:

  1. Call useTheme() with themes for the first chart;
  2. Create the first chart;
  3. Call unuseTheme() for the themes you don't want to be applied to subsequent charts;
  4. Call useTheme() with themes for the second chart;
  5. Create the second chart;
  6. Rinse and repeat.
// Setting the theme to be applied to the first chart
am4core.useTheme(am4themes_animated);

// Create the first chart
// ...

// Unuse the theme from the first chart
am4core.unuseTheme(am4themes_animated);

// Setting the theme to be applied to the second chart
am4core.useTheme(am4themes_material);

// Create the second chart
// ...
// Setting the theme to be applied to the first chart
am4core.useTheme(am4themes_animated);

// Create the first chart
// ...

// Unuse the theme from the first chart
am4core.unuseTheme(am4themes_animated);

// Setting the theme to be applied to the second chart
am4core.useTheme(am4themes_material);

// Create the second chart
// ...

BTW You can "unset" all active themes at once, by calling am4core.unuseAllThemes().

Creating custom themes

MORE INFO We have a separate tutorial "Creating themes". Check it out if you'd like to create your own theme.