Using themes

Themes are a handy way to quickly and easily tweak the look and feel of your visualizations and make them stand out from even the busiest news feeds. The overall look of your visualization, and color in particular, can communicate your message more effectively, set the right tone, guide the eye, and evoke emotional responses from your audience. As a beginner, you might think themes are a nice-to-have feature, but as you grow into a more  advanced user, you’ll realize that themes can help you do a much better job conveying your message.

In this guide, you’ll learn how to:

• Use existing themes
• Create your own theme
• Customize multiple charts at once

Learn the anatomy of a theme

Before we jump in and start playing with themes, let’s get the basics out of the way. We mentioned color as an important part of themes, but what about other elements? Here’s a quick rundown of the building blocks of every theme.

• Fonts
  The default font in Charts is Lato, but you can choose any of the 273 included fonts that might work better for your brand or personal preferences.
• Colors
  Colors play critical role in setting the mood, conveying your message, and grabbing interest of your audiences. Use the color wheel to select a color, or enter its hexadecimal code.
• Heading and footnote  
  You can add additional information, such as heading and footnote to help your audience read your chart more easily. In addition to editing the heading and footnote, you can also set their size and shade.
• Labels and titles
  The size and shade of axis labels and titles, as well as value labels can also be customized. 
• Lines and mark symbols
  You can tweak the color and thickness of axis lines, set the color and style of grid lines, and customize the color shade of tick marks. 
• Tooltip
  Tooltip is activated when the user hovers the cursor over an item. When the tooltip is activated, a small box with the text you specified will appear, and you can set the tooltip size.

Apply an existing theme

If you’re looking for an effective theme designed by professionals, you’ll love the included themes. Let’s check out what you get right out of the box. We’ll use general elections data as an example and visualize results for each year since 1988.

While the chart itself is readable, we can change the color scheme to match the party theme. Before creating your own theme, let’s see if any of the premade themes can help us.

1. In the upper-right corner, click Edit. 
2. In the top right corner, click the theme icon .
3. Click a theme to apply it.

All changes are applied in real time, you can try out all themes just by clicking them. Now, since none of the themes fit our Democratic and Republican theme out of the box, let’s see if we can adapt any of them to fit our data. We’re visualizing Democratic and Republican Party results, so we’ll need red and blue color. Let’s try the Cold N Hot theme and see what we can do with it.

1. In the theme menu, click Cold N Hot to apply it.
2. In the upper-right corner, click X to return to the previous screen.
3. Click Data Series. 
4. Click Democrats to expand it.
5. Click the circle below the name of the series.
6. Use one of the blue shades included in theme colors. Or
   Use custom color by using color picker. We’ll go ahead and enter 232066, the hex code of Democrat blue.
7. Click the back button and click Republicans to expand it.
8. Click the circle below the name of the series.
9. Use one of the red shades included in theme colors. Or
   Use custom color by using color picker. We’ll go ahead and enter BD2031, the hex code of Republican red.

There you have it. Even though the data behind our visualization hasn’t changed a bit, just by tweaking the series colors, our audiences are more likely to accurately guess what the chart represents, even without reading the header and footer. 

Create your own theme

Now that you’ve learned how to switch between the themes, let’s go and create our own custom theme. To avoid starting from scratch, however, we’ll go ahead and select one of the existing themes as the starting point. 

1. In the upper-right corner, click Edit. 
2. In the top right corner, click the theme icon .
3. Select the theme you want to use as the starting point for your custom theme.
4. Click New theme.

Right now, we’re looking at the settings of the existing theme we selected, and the theme editor allows you to preview what the theme looks like when applied to your particular chart. Let’s set everything up.

1. In the left-hand sidebar, click the theme title and edit it. We’ll call our theme Demo Theme Extraordinaire.
2. From the font family dropdown, select the font you want to use in your theme. If you already have a particular font in mind, click Search fonts at the top of the dropdown, and enter the name of the font. We’ll search for Anonymous Pro and select it from the results.

Now the fun part – creating the theme color palette. Bear in mind that specific colors can evoke different emotions and responses that affect how your visualization and even message are perceived. 

Let’s first clean up the colors that came with the theme we’re editing.

1. In the Color Palette section, click the circle with the color you want to remove or edit.
2. Click the trash icon  to remove the color from your theme.
3. In the theme editor, click the add button  to add a new color.
4. Enter the hex code of the color you want to add to your theme, or pick it from the color picker section below the hex code field.

   When you apply a theme, colors are continuously applied from the first one. For example, if you have two series, the first two colors from your theme will be applied automatically. 

Now that we’ve put together the theme color palette, let’s move down the sidebar and set up the headings. Charts support normal and large heading, and you can set both variants’ font color using the slider, and size using the dropdown in the theme editor. You can also tweak the color and size of the font used in axis titles and labels, as well as value labels. 

Let’s use the color sliders to set up axis lines, grid lines, and tick marks. When working with axis lines, you can set their thickness by entering thickness in pixels. There are five different grid line styles you can pick from, in addition to the color slider.

You can set the size of the tooltip in the theme editor.

And there you have it – your first theme. Before saving the theme, make sure you entered a unique name that will help you find your theme more easily and hit Save in the top-right corner.

Customize multiple charts at once

Themes are a great way to maintain consistency and build a solid brand image. Whether you’re using your company’s or university’s color scheme, you’re more than likely to find having a theme to be useful. At one point or another, however, you’ll need to update the look and feel of your charts to keep up with your ever-growing brand image. 

Charts themes were designed to be able to keep up with every brand and personal preference, regardless of how fast they change. As soon as you update one of your themes, the changes will be applied to every chart using that particular theme. So, let’s try and tweak our Demo Theme Extraordinaire.

1. In the theme sidebar, in the Custom section, find the theme you created.
2. In the upper-right corner of the theme thumbnail, click the more icon .
3. Click Edit.
4. Here, we can customize every element, just like we did when creating the theme. 
5. When you’re done tweaking the theme, hit Save.

As soon as you save changes, they will be applied to all charts using that particular theme.