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 controls 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 settings for most of the properties of a component or data visualization. The only exclusions are the properties tied either to the metric set or to the specific dashboard. 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.

On 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

On 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

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

Styles should be applied to data visualizations of the same type. For example, Linear Gauge styles should be applied to Linear Gauges, while Radial Gauge styles should be applied to Radial Gauges. Furthermore, gauge pointer styles are only applied to matching Pointer Types, which means the style will apply to the whole data visualization but may not apply to the pointer if the type does not match.

Some data visualization types include more than one data visualization. For example, Relationship Diagram styles can be applied to a Sankey diagram, and vice versa. Another example is the Chart type of data visualizations. The Line Chart style can be applied to a Bar Chart, as both are part of the Chart data visualization type; however, the styling of the data point series (i.e. the properties specific to the line itself) will not be applied, as the Chart Type on the series does not match.

Some pre-configured data visualizations, which are found in the Recommended section when selecting a data visualization in a scorecard or report, are handled as an exception. Examples of such data visualization are the Sparkline, Data Bar, Horizontal Plot, and Bullet Graph. In order to maintain their default configurations, Dundas BI treats them as separate types. This means that while a Sparkline is a line chart, the styles from a line chart will not be applied and styles specific to Sparklines should be used.

Note
As a best practice, you should apply styles before customizing the visualization. Applying a style may remove existing settings, such as a discrete color rule.

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 Create Theme on the toolbar.

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