Styles and themes

Contents[Hide]

1. Overview

Styles and themes give you an easy way to apply predefined settings to your visualizations, components, or filters 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 or reports 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

2. Styles

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 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. The following steps work the same way for any component, filter or visualization, including the visualization in a full screen metric set.

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. 

Use Quick Access Properties or the Properties window to change some settings for the button. For example, switch to the Look tab in the Properties window and customize some of the 'rest' properties.

Change button appearance
Change button appearance

In the toolbar, click Styles, and then click Save Style.

Click Save Style
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.

Enter a file name for the style
Enter a file name for the style

Click Save at the bottom of the dialog.

If you expanded the Styles folder earlier in the Explore window as shown below, your new style may not appear until you right-click 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:

  • You can go to the Explore window and expand the Styles folder, then drag a style onto an element (the button in our example).
    Drag a style onto the button
    Drag a style onto the button
  • Another way is to click to select an element on the canvas if applicable, then click Styles in the toolbar and Apply Style. Select a style in the list that appears, then click Open.
    Click Apply Style in the toolbar
    Click Apply Style in the toolbar

In our example, we now have two similarly-styled buttons.

Style is applied to the second button
Style is applied to the second button

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

2.3. Compatibility

You can usually only apply a style to the same type of element that was used to save the style. For example:

  • Each type of gauge uses separate styles (e.g., radial vs. linear gauges). A single gauge can have multiple pointers with different pointer types, so pointer properties are only applied to matching pointers.
  • SparklineData 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.

For visualizations, 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. Data Point Series properties from the style are only applied to series with a similar chart type setting: for example, a style created from a line chart can be applied to a bar chart, but the styling of a line series will not be applied to the bar series because these 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.

Tip
Try to apply styles before making your own customizations. Applying a style may change existing settings you might not have thought of.

3. Themes

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 Theme in the toolbar, then Create Theme. (If an element on the canvas is selected, click an empty area first to de-select it.)

Click Create Theme
Click Create Theme

In the New Theme dialog, set a Name. In the Save dialog that appears, optionally also change the selected folder Location for the theme, then click Save at the bottom.

Enter a file name for the theme
Enter a file name 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 and click Open at the bottom.

Add a style to the theme
Add a style to the theme

Add other styles to the theme as desired.

Two styles added to the theme
Two styles added to the theme

Note
Adding multiple styles compatible with the same element will apply them all in order. For example, chart styles are compatible with all other charts.

Click the Save button at the bottom.

If you expanded the Themes folder earlier in the Explore window as shown below, your new theme might not appear until you right-click the folder and choose Refresh.

3.2. Apply a theme

In this example, we added a couple of button components and a bar chart with some data to a dashboard.

There are a couple of ways to apply a theme to your dashboard, report, or other view:

  • You can drag a theme from the Explore window and drop it onto an empty area of the canvas.
    Drag theme to canvas
    Drag theme to canvas
  • With no elements selected on the canvas, click Theme in the toolbar, and then Apply Theme. Select a theme and then click Open.
    Click Apply Theme in the toolbar
    Click Apply Theme in the toolbar

The theme is applied to the current view, applying its styles to every element that's compatible.

Theme is applied to the current view
Theme is applied to the current view

3.3. Setting a default theme

Administrators can configure the application so that a default theme is automatically 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.

Result of dragging the Candy theme onto the canvas
Result of dragging the Candy theme onto the canvas

5. See also

Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri