Vizzlo offers a selection of 13 themes to control the following aspects of your chart's appearance. In this article we will show how to define your own theme to customize the following aspects:
— Color palettes
— Axis & grid line settings
— Brand logo
How do you open the theme editor?
You can customize, manage, and create new themes while editing any chart. Click on the brush icon in the sidebar to start.
How do you define a color palette?
Every theme comes with predefined colors. To replace an existing color, click on any of the colored squares. A color picker will open, where you can either choose a color or enter a color code in form of a Hex color code or RGB. To add a new color to your palette, click on the '+' first and then choose a color. While changing the colors, you will see instantly how the chart is affected.
As an example we'll use the following colors:
— Background color - #F9F6F3
— Neutral background color - #C8AC91
— Colors - #CD478C, #F5573C, #FE9900, #00B36C, #194B8A, #45B5C3
(We won't define 'Distinct colors', a feature we plan to depreciate in the near future.)
You can reorder colors by the 'drag and drop' method. Having defined all colors, in the theme editor, now you should see this:
Say you created a bar chart, with the colors we just defined it might look like this:
What happens when I need more colors than are defined in my color palette?
By default a bar chart has 5 values and by default the same color is used for all columns. To understand what happens when we have more values than colors, we need to change the
Color mode to
If there are less colors defined in a theme than a chart needs, our algorithm will add as many colors as needed. These colors are created by interpolation from the color space defined by the color palette. An exaggerated example of a bar chart with 50 columns and the three colors defined above should make this clear:
Tip: If you need some inspiration to create your color scheme, there are also apps that many designers use as tools for their work: Adobe Color CC, chroma.js, Colordot, or Coolors to name a few. Also, worth looking at: Wes Anderson Palettes.
For each theme, you can mainly select a combination of up to five fonts:
- Title font - corresponds to the font of the title of your chart
- Heading font - corresponds to headings in charts that present text information in two hierarchical levels, i.e. which require a title for categories and their descriptions
- Content font - corresponds to all remaining text content in the charts, e.g., labels, values, keys, and descriptions
- & 5. (optional) Set a custom footer font and a custom axes font - by default, these inherit their properties from the content font
You can customize the fonts, their sizes, weight and color. For each font, you can change the color by clicking on the color fields.
The left color field corresponds to the color fonts should apply over a light background; and the right color field, just the other way round, corresponds to the color to apply over a dark background.
All themes use Google Fonts which are free to download, if you are using our teams plan you can upload your own fonts. It is good practice to not use more than two font families: one for the title, and the other for headers and content. If you need inspiration, take a look at Font Pair, also Google Fonts has the option to show popular pairings for any of their fonts.
In our example we chose to use only Open Sans and set the font color to #000000, i.e. black.
How to change axis & grid lines properties?
Adjusting axis and grid line settings is straightforward. For the axis, choose to display an arrow end or not, set the line width and color.
For the grid lines choose a stroke, a width and a color. We set the stroke of the grid lines to Solid and keep the defaults.
How do you add a brand logoto your theme?
At the bottom of the theme editor you click on the button 'Add overlay'. A file browser will open and you can add an image file with the extension .gif, .jpeg, .jpg, .png, or .svg.
You can drag and drop the image to adjust its placement on the slide. Alternatively, you can use the position coordinates to place it as you wish. By moving the slider, you can change the size of your logo.
How do you save a new theme?
Browse to the top of the theme editor and press Ok to apply your changes to your chart and click Save as… to save it as your own theme. Then it will be applicable to other charts without doing all those changes manually again. Press Cancel to discard all the changes you made.
After you saved a theme to your profile, you'll find it on top of the list while browsing themes. An icon will be generated automatically based on the colors and background color you set
Note: As a business admin, you can choose to save the new theme under your organization, making it available for your colleagues. Premium users and non-admins can save themes under their profiles.
How do you change your default theme?
Go to your profile settings and define your newly created theme as default.
Article is closed for comments.