Styles and Themes

Contents[Hide]

1. Overview

Styles and themes give you an easy way to save the appearance settings for controls such as components and data visualizations, and then apply the saved settings to other control instances or views.

A typical scenario for using styles and themes is when you have several related dashboards and you want all the controls to have a consistent appearance from one dashboard to the next.

Related video: Working with Styles and Themes

2. Styles

A style contains the appearance (i.e., Look) settings for a component or data visualization. Once you've saved a style, you can easily apply it to another instance of the same type of component or data visualization.

2.1. Save a style

For this example, create a new blank dashboard.

Go to the toolbar, click Components, and then click Button. A button component is added to your view.

With the button selected on the canvas, click Properties and then click Look in order to change the appearance of the button. Scroll down to see the Rest-related properties and change a couple of them.

Change button appearance
Change button appearance

Go to the toolbar, click Styles, and then click Save Style.

Click Save Style
Click Save Style

In the Save File dialog, select a folder location and enter a file name for the style.

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

Click Submit to save the style. 

To see the saved style, go to the EXPLORE window and expand the Styles folder. If your style doesn't appear there, right-click on the Styles folder and click Refresh.

Styles folder in EXPLORE window
Styles folder in EXPLORE window

2.2. Apply a style

Click the canvas, go to the toolbar, click Components, and then click Button in order to add a second button to the dashboard.

There are a couple of ways to apply the saved style to this second button. The first way is to go to the EXPLORE window and expand the Styles folder.

Drag the style from the EXPLORE window and drop it onto the second button.

Drag style onto the button
Drag style onto the button

You now have two similarly-styled components.

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

The second way to apply a style is to select the component or data visualization on the canvas, click Styles from the toolbar, and then click Apply Style.

Click Apply Style from toolbar
Click Apply Style from toolbar

In the Open File dialog, select the saved style that you want to apply, and then click Submit.

2.3. Styles for data visualizations

Regarding data visualizations such as charts and gauges that have many different types, note that styles should be applied to matching data visualization types. For example, linear gauge styles need to be applied to other linear gauges, and radial gauge styles need to be applied to radial gauges. Also, gauge pointer styles are only applied to matching pointer types.

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, go to the toolbar, and click Create Theme.

Click Create Theme
Click Create Theme

In the New Theme dialog, click Select file name. In the Save File dialog, select a folder location and type in a file name for the theme.

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 File dialog, select an existing style to be added to the theme.

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

Add other styles to the theme as desired.

Two styles added to theme
Two styles added to theme

Click Submit to save the theme.

To see the new theme, go to the EXPLORE window and expand the Themes folder. If you don't see your theme, right-click over the Themes folder and click Refresh.

Themes folder in EXPLORE window
Themes folder in EXPLORE window

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 the existing theme from the EXPLORE window and drop it onto the canvas.

Drag theme to canvas
Drag theme to canvas

The theme is applied to the current view.

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

The second way to apply a theme is to click the canvas and then click Apply Theme from the toolbar. In the Open file dialog, select the theme you want to apply, and then click Submit.

Click Apply Theme from toolbar
Click Apply Theme from toolbar

4. Built-in styles and themes

The GLOBAL project in Dundas BI includes a set of built-in styles and themes you can use. But you don't need to switch to the GLOBAL project to access these styles and themes. Just expand the Shared subfolder under the Styles and Themes folders in your current project. The Shared subfolder basically links to the corresponding Styles or Themes folder in the GLOBAL project.

Built-in styles and themes from the GLOBAL project can be accessed from the Shared subfolder
Built-in styles and themes from the GLOBAL project can be accessed from the Shared subfolder

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:

  1. Create a new metric set with one measure, row hierarchy, and column hierarchy.
  2. 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.
  3. Drag the metric set onto each data visualization in turn.
  4. Expand the Themes Shared folder and drag a theme to the canvas that you want to apply.

Using the built-in Candy theme to style the data visualizations on a dashboard
Using the built-in Candy theme to style the data visualizations on a dashboard

As you can see from the above figure, data visualizations use the built-in themes/styles in different ways. For example:

  • Charts apply the styles to the color of each series.
  • Table visualizations use the styles to determine the selection colors of cells or rows when you hover over or click on them.
  • Gauges use the styles to determine the color of their pointers.

5. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

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