Themes

Overview

To simplify visual adjustment of js charts AnyChart provides "AnyChart Themes" technique. Chart theme is a named preset for chart settings.

In this tutorial we will explain what for and how themes are used.

Themes Explained


The main idea of themes is to segregate chart settings and data section for easy changing and/or reuse settings in another charts that should look the same way.


If some chart type is used widely on your site, you can store settings in a js file and then use theme when needed - no need to configure chart again and copy-paste settings from one place to another.AnyChart comes with a number of Out of the box themes that can be used to change look and feel of every chart in the package, learn about them in the next section.

Out of the box Themes

Out of the box Themes can be located either at Themes Section at AnyChart CDN or in the AnyChart Downloadable Package, these themes change the look, feel and layout of every chart, map, gauge, treemap or stock chart. You are free to use and modify these themes as you want. To use any of these themes you need, just with any External theme reference the proper file in HTML document and then apply theme by name:

  <head>
<!--Link to the files with out of the box themes -->
<script src="https://cdn.anychart.com/themes/latest/coffee.min.js"></script>
<script src="https://cdn.anychart.com/themes/latest/dark_blue.min.js"></script>
<script>
      anychart.onDocumentReady(function() {
        // data
        var data = anychart.data.set([
          ["Department Stores", 637166],
          ["Discount Stores", 721630],
          ["Men's/Women's Specialty Stores", 148662],
          ["All other outlets", 90000]
        ]);

        // apply coffee theme
        anychart.theme(anychart.themes.coffee);

        // apply dark blue theme
        // anychart.theme(anychart.themes.darkBlue);

        var chart = anychart.bar();
        chart.bar(data);
        chart.container("container");
        chart.draw();
      });
</script>
  </head>

You can find minified and uncompressed themes at CDN, it is recommended to use minifed themes in production, uncompressed themes can be used to create new themes, you can compress them with the JavaScript compression tool of your choice or use uncompressed.

There are 16 themes in AnyChart at the moment: Coffee, Dark Blue, Dark Earth, Dark Glamour, Dark Provence, Default Theme, Light Blue, Light Earth, Light Glamour, Light Provence, Monochrome, Morning, Pastel, Sea, 6.x Version, Wines.

And there are 11 accompanying Color palettes which are used by these themes, but their use can be combined if needed.

You can take a look at the AnyChart Themes Demo where you can try every theme and palette on any of charts and maps available in AnyChart JavaScript Charts package.

Create Theme

To create a theme is to create variable with all desirable chart settingsand set it using theme().

Suppose you want to create a bar charts many times, and all of them will use the same axes and chart titles.

  // data
  var data = anychart.data.set([
["Department Stores", 637166],
["Discount Stores", 721630],
["Men's/Women's Specialty Stores", 148662],
["All other outlets", 90000]
  ]);

  // chart type
  var chart = anychart.bar();

  // set title
  chart.title("Bar Chart");

  // set axes titles
  var xAxis = chart.xAxis();
  xAxis.title("Retail Channel");
  var yAxis = chart.yAxis();
  yAxis.title("Sales");

  // set data
  chart.bar(data);

You can predefine these settings in a theme and use it anytime you want. Below is the snippet of variable that contains AnyChart theme.

  // create variable for custom theme
  var customTheme = {
// define settings for bar charts
"bar": {
      // set chart title
      "title": {
        // set title text
        "text": "Bar Chart",
        // display title
        "enabled": true
      },
      // settings for default x axis
      "defaultXAxisSettings": {
        // set x axis title
        "title": {
          // set title text
          "text": "Retail Channel",
          // force title to be shown
          "enabled": true
        }
      },
      // settings for default y axis
      "defaultYAxisSettings": {
        // set axis name
        "title": {
          "text": "Sales",
          "enabled": true
        }
      }
}
  };

Now, when simple theme is ready we will learn where we can store it and how to apply it.

Internal Themes

You can store a theme right where your chart code is, just be sure to apply the theme before you create a chart:

  // create variable for custom theme
  var customTheme = {
// define settings for bar charts
"bar": {
      // set chart title
      "title": {
        "text": "Bar Chart",
        "enabled": true
      },
      // settings for default x axis
      "defaultXAxisSettings": {
        // set x axis title
        "title": {
          "text": "Retail Channel",
          "enabled": true
        }
      },
      // settings for default y axis
      "defaultYAxisSettings": {
        // set axis name
        "title": {
          "text": "Sales",
          "enabled": true
        }
      }
}
  };
  
  // data
  var data = anychart.data.set([
["Department Stores", 637166],
["Discount Stores", 721630],
["Men's/Women's Specialty Stores", 148662],
["All other outlets", 90000]
  ]);
  
  // apply theme
  anychart.theme(customTheme);
  
  var chart = anychart.bar();
  chart.bar(data);
  chart.container("container");
  chart.draw();

Sample chart using internal theme, click "Launch in playground" to view JS settings:

JsFiddle Playground

External Themes

Next, you can create a file with several themes and use it to store settings. In this case you need to reference this file in the page where your chart is using script tag.

  <head>
<!--Link to the file with the custom theme-->
<script src="custom_theme.js"></script>
<script>
      anychart.onDocumentReady(function() {
        // data
        var data = anychart.data.set([
          ["Department Stores", 637166],
          ["Discount Stores", 721630],
          ["Men's/Women's Specialty Stores", 148662],
          ["All other outlets", 90000]
        ]);
      
        // apply custom theme
        anychart.theme(customTheme);

        var chart = anychart.bar();
        chart.bar(data);
        chart.container("container");
        chart.draw();
      });
</script>
  </head>

The content of custom_theme.js should be something like the snippet below:

  var customTheme = {
"bar": {
      "title": "Bar Chart",
      "defaultXAxisSettings": {
        "title": "Retail Channel"
      },
      "defaultYAxisSettings": {
        "title": "Sales"
      }
}
  };

Default Theme

You can find defaultTheme.js in binaries folder in the downloaded AnyChart package. This file can be found in binaries folder in the downloaded AnyChart package. You DON'T NEED to reference this file to use Default theme, it is built-in in the component, we provide this file only as a reference for a custom theme you may want to create yourself.


Note: the theme you create need not contain all settings you see in a default theme - you need to tune only the settings you want to change or want to be persistent .

Old Theme


AnyChart provides several default themes along with the opportunity to create custom themes. One of default themes is the default one from AnyChart 5.x, 6.x. To use old theme you have to reference special theme file with the name v6.js. This file can be found in binaries folder in the downloaded AnyChart package. After referencing the file you can use theme() method with anychart.themes.v6 parameter to apply old theme:

  // apply old theme
  anychart.theme(anychart.themes.v6);

Multiple Chart Types

The main purpose of AnyChart Themes is to simplify the process of chart creation, so one theme can store settings for the different chart types.

  var customTheme = {
// settings for bar charts
"bar": {
      "title": {
        "text": "Bar Chart",
        "enabled": true
      }
},
// settings for column charts
"column": {
      "title": {
        "text": "Column Chart",
        "enabled": true
      }
}
  };

Sample below shows two charts with minimal settings, both of them use one theme with title settings.

JsFiddle Playground

Themes Use in Dashboard Mode

In the sample below a table contains several charts. Settings for these charts are predefined in the theme. It is very convenient - these charts have many similar settings. Click "Launch in playground" to examine the code of the sample.

JsFiddle Playground

Reset Theme

There is one very important thing you need to remember when you work with themes in Dashboard mode: after the theme is defined in code every chart uses this theme until you set another theme. To reset theme to the default or to the new one you have to use theme() method again.

  // return default theme to the charts below
  anychart.theme(null);

Global Settings, Defaults and Theme Reference

As you may have noticed, theme is basically chart settings done in JSON and its structure is almost identical to chart JSON settings, and can be described by JSON Scheme, you can read more about this at JSON article. But there are some very important characteristics and features in a theme: you can set defaults and global settings for some elements, and you can set default settings for a chart type.

Note: AnyChart themes can contain much more settings than this table presents. File with default theme contains all possible chart settings with default values and this file can be used as a reference of all theme settings. Read more about default theme in Default Theme section.

Here is a list of global settings and defaults that can be defined in a theme:

Method Way to set
Font
fontSize {"defaultFontSettings": {"fontSize": ""}}
fontFamily {"defaultFontSettings": {"fontFamily": ""}}
fontColor {"defaultFontSettings": {"fontColor": ""}}
textDirection {"defaultFontSettings": {"textDirection": ""}}
fontOpacity {"defaultFontSettings": {"fontOpacity": ""}}
fontDecoration {"defaultFontSettings": {"fontDecoration": ""}}
fontStyle {"defaultFontSettings": {"fontStyle": ""}}
fontVariant {"defaultFontSettings": {"fontVariant": ""}}
fontWeight {"defaultFontSettings": {"fontWeight": ""}}
letterSpacing {"defaultFontSettings": {"letterSpacing": ""}}
lineHeight {"defaultFontSettings": {"lineHeight": ""}}
textIndent {"defaultFontSettings": {"textIndent": ""}}
vAlign {"defaultFontSettings": {"vAlign": ""}}
hAlign {"defaultFontSettings": {"hAlign": ""}}
textWrap {"defaultFontSettings": {"textWrap": ""}}
textOverflow {"defaultFontSettings": {"textOverflow": ""}}
Palettes
palette {"palette": {"type": "","items": []}}
hatchFillPalette {"hatchFillPalette": {"items": {}}
markerPalette {"markerPalette": {"items": {}}

Here is a sample of a dashboard with a column chart, pie chart and a radar with default font altered by the default node in a theme:

JsFiddle Playground

AnyChart 6.x, 7.0.0 to 7.5.1 look to AnyChart 7.6 Conversion

Themes are introduced in AnyChart 7.6, along with new color scheme and changed default settings. If you have never used AnyChart 7 before the release version 7.6 you can ignore this section cause it does not affect you.

If you are already using AnyChart 7.0 to 7.5.1, you may face some conflicts in chart settings after the upgrade. These conflicts are not critical, but the visual appearance of your charts can change unexpectedly. There are several solutions for this problem:

  • use special anychart.theme_v6.min.js with the old theme to your charts as default one (this js file can be found in binaries folder in the downloaded AnyChart package or you can get this js from anychart cdn server using the link cdn.anychart.com/themes/latest/v6.min.js).
  • or you can simply use new anychart.min.js and set old theme for your charts (this is the recommended way to solve this problem).

Note: AnyChart html5 charting framework recommends you to use new AnyChart theme, version 6 style will not be developed further and supported for the new chart types.

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.