Styles and themes
Styles and themes give you an easy way to apply predefined settings to your visualizations or elements to give them a consistent style or to reuse previous settings.
A typical scenario for creating styles and themes is when you have several related dashboards and you want all their contents to have a consistent appearance from one dashboard to the next. You can also apply one of the existing themes or styles provided.
Related video: Styles and Themes
A style contains the settings for most of the properties of a component, filter, or data visualization. The only exclusions are properties that are typically never shared, such as references to a specific a metric set, or the specific text displayed in a label or button.
You can save your own style and then easily apply it to another of the same type of element, or you can apply one of the existing provided styles.
2.1. Save a style
As an example, create a new blank dashboard, and click Components and then Button in the toolbar to add a button component. The following steps are also similar when saving a style for a filter or visualization, including the visualization in a full screen metric set.
Use the Properties window to change some settings for the button. For example, switch to the Look tab and customize some of the 'rest' properties.
On the toolbar, click Styles, and then click Save Style.
In the Save dialog, select a folder location and enter a file name for the style. You may want to include the type of the element in the name for easy reference.
Click the submit button at the bottom to save the style.
To see the saved style, go to the Explore window and expand the Styles folder. Your style may not appear because it was just created, in which case you can right-click on the folder and choose Refresh.
2.2. Apply a style
Continuing the example, add a new button to the dashboard. There are a couple of ways to apply a saved style to an element such as this button, as well as any other type of element or to a visualization in a full screen metric set.
You can go to the Explore window and expand the Styles folder, then drag a style onto the element.
In our example, we now have two similarly-styled components.
With your element selected on the canvas (or when editing a visualization full screen), another way to apply a style is to click Styles in the toolbar and Apply Style.
In the Open dialog, select the saved style that you want to apply, and then click the submit button at the bottom.
When applying a style, you can expand the Shared subfolder under Styles to find various styles provided for you. Choose one named with an element type that matches your element (e.g., Button).
As with components and filters, you can usually only apply a style to the same type of visualization that was used to save the style.
There are certain exceptions where you can apply the same style to different visualization types:
- A single chart can contain different chart types on each data point series, so any chart style can be applied to any other chart, but series properties from the style are only applied to series with a similar chart type setting. For example, a style created from a chart with line series can be applied to a bar chart, but the styling of a line series will not be applied to the bar series because these two chart types are very different.
- Styles for all of the relationship diagram types are compatible with each other because they are each made up of nodes and links that have similar settings.
Sparkline, Data Bar, and Horizontal Plot are specialized versions of charts in reports and scorecards, which are not compatible with regular charts so that a theme can contain separate styles for line charts (with visible axes) and for sparklines (without visible axes), for example.
Each type of gauge uses separate styles (e.g., radial vs. linear gauges), but a single gauge can have multiple pointers with different pointer types, so pointer properties are only applied to matching pointers. If none of a gauge's pointer types match those saved in a style, only the rest of the style's properties will be applied.
A theme is a collection of existing styles, which you can apply all at once to a view such as a dashboard or report.
3.1. Create a theme
To create a theme, click Create Theme in the toolbar. (If an element in your view is selected, click an empty area of the canvas first.)
In the New Theme dialog, set a Name, and in the Save dialog that appears, optionally also change the selected folder Location for the theme.
Returning to the New Theme dialog, click Add style. In the Open dialog, select an existing style to be added to the theme.
Add other styles to the theme as desired.
Click the submit button at the bottom to save the theme.
To see the new theme, go to the Explore window and expand the Themes folder. Right-click the folder and click Refresh first, if needed.
3.2. Apply a theme
For this example, create a new blank dashboard. Then add a couple of button components and a metric set visualized as a bar chart.
There are a couple of ways to apply a theme to this dashboard. The first way is to simply drag a theme from the Explore window and drop it onto the canvas.
The theme is applied to the current view, applying its styles to every element that's compatible.
The second way to apply a theme is to click Apply Theme in the toolbar. (If an element is selected, first click an empty area of the canvas to de-select it.)
In the Open dialog, select the theme you want to apply, and then click the submit button at the bottom of the dialog.
3.3. Setting a default theme
Administrators can configure the application so that a default theme is applied when first creating visualizations, components, and filters, to customize their default colors and other appearance. This includes when data is first added to a visualization, or when re-visualizing the entire visualization when editing or viewing.
See the article on setting a default theme for details.
4. Built-in styles and themes
The Global project includes a set of built-in styles and themes you can use.
You don't need to switch to the <Global> project to access these styles and themes: just expand the Shared subfolder under Styles or Themes in your current project.
These built-in styles and themes are just a few samples to get you started. To see what these styles/themes look like when applied to your data visualizations, follow these steps:
- Create a new metric set with one measure, row hierarchy, and column hierarchy.
- Create a new dashboard and add a few different types of data visualizations such as a bar chart, area chart, linear gauge, radial gauge, and table.
- Drag the metric set onto each data visualization in turn.
- Expand the Themes and Shared folders, and then drag a theme to the canvas that you want to apply.
As you can see from the above figure, each different visualization type had its corresponding style applied.