Themes

Themes in amCharts 4 is much more than just collection of appearance settings. They can change the way chart acts, looks, and even 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";

<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
// ...

<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.

TypeScript

// 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
// ...

JavaScript

// 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.

Special-use themes

Among other themes that are mostly color-related, amCharts 4 comes with a few special-use themes.

Patterns theme

This accessibility-oriented theme automatically fills Column, Line, or Pie series with a distinctive patterns, easily visible by people with reduced vision and color blindness.

More info

For more on how to use patterns theme, read here.

Microchart theme

Microcharts or sparklines are super-small charts that can be used as inline text elements, or parts as extremely condensed dashboards where screen estate is extremely precious.

“microchart” theme bundled with amCharts 4 automatically disables a bunch of elements such as axis labels, grid, axis tooltips, and similar, making the charts instantaneously usable in small containers.

More info

For more on how to use microchart theme, read here.