Adding a Theme to a Chart

A theme is used to determine the coloring and hues that display in the charts you configure using WebFOCUS Designer. For example, the default border color and chart colors are determined by the theme.

When creating stand-alone content, the default theme is Designer 2018. When you turn the visualization into a page by adding a second new content item, the theme used for the chart is applied to the page. When you add items to the page, either by creating them or adding them as external content, the page theme is used as the default for all content items. You can then change the theme for each individual item.

You can use one of the themes included with WebFOCUS, or you can create your own theme. For example, you may want to apply a corporate standard theme to your chart. You can add and change themes to suit your requirements (for example, branding).

Available themes that are called by WebFOCUS Designer are located in the Global Resources area, accessible from the Workspaces tab of the WebFOCUS Home Page, as shown in the following image. Custom themes can be added to folders within the Custom folder.

Supported formats for themes include .css and .sty. A .css theme file is used to style a page, while .sty file is used to style content such as charts and reports. When files called theme.css and theme.sty are placed into the same folder in the custom themes folder of the Global Resources area, they are available for selection in WebFOCUS when editing page components and content items. The two files are associated, so when the .css theme file is applied to a page, the associated .sty theme file is applied to new content in that page, by default. Similarly, if you select a theme for a chart, which uses the .sty file, then when you convert to a page, the associated .css file is used as the default page theme.

You can develop your own theme using the WebFOCUS text editor and then access it in WebFOCUS Designer. You can customize the .sty theme file used for charts and reports by specifying a set of default property values in it. For information on the properties that you can use in the theme to style a chart, see the Creating HTML5 Charts With WebFOCUS Language PDF.

Tip: You can use the code from an existing theme as a model when creating a new theme.

Note: Charts and reports created for use on pages that have colors applied to the component containers can use a transparent background to allow the defined background color of the page container to show through. The Midnight theme, provided as one of the Global Resources options, is an example of a page theme that contains darker background colors. When used in content such as a chart or report, the Midnight theme uses white text to create contrast with this darker background.

Prior to transforming a content item into a page, the run-time preview for a stand-alone chart or report displays a white background only. This means that if, in order to display on a dark colored page, the font color in the selected theme is defined as white and uses a transparent background, then the text will not be visible on the white preview background. To view the white text, build your chart or report on the canvas, add it to a page container with a dark background, or change the chart background color from the Format tab. Note that a non-transparent chart background covers the panel background when the chart is part of a page.

Procedure: How to Add a Theme to a Chart

You can add a theme to a chart to color the background and components of your chart. If the chart is in a page, the default theme is the one used in the page. If the content is stand-alone, so that there is no page from which to inherit the theme, the default theme is called Designer 2018.

1. Open WebFOCUS Designer. On the WebFOCUS start page, click the plus menu and then click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.

   WebFOCUS Designer opens in a new browser tab.

2. Select a workspace and a data source available from that workspace.

   Once you select a data source, WebFOCUS Designer loads with options to create a single content item.

   If you start creating content without changing the theme, the default theme is used, as shown in the following image.

   

3. On the Format tab, with the General option selected from the quick access menu, in the Theme and Format section, open the Theme drop-down menu.

   A list of available themes is displayed. As shown in the following image, you can choose from the Designer 2018, Light, Midnight, and Vivid themes that are included with WebFOCUS, a custom theme added to the Global Resources area, such as the themes Alex's Theme, Custom Theme, or MyTheme shown in the image, or click Custom to select a legacy theme or a theme saved to a workspace folder.

   

4. Select another theme from the list (for example, Light) to change the theme.

   The color of the background and chart components changes based on the selected theme, as shown in the following image.

   

5. Click Add visualization on the Designer toolbar to add another component to the visualization.

   The visualization transforms from a single content item into a page. Notice that the page adopts the theme that was used for the original content item. Additionally, the content item now has a theme of Inherit Page Theme, so that if you change the theme of the page, the theme of the content item changes along with it.

6. Add fields to the new chart to create a second content item. Notice that it initially uses the default theme.
7. Click the page toolbar or select the Visualization item from the outline to select the entire visualization.
8. Click the Format tab select a different theme from the Theme drop-down menu, for example, Midnight.

   Notice that the theme of both content items have also changed to match the page, since they have a theme setting of Inherit Page Theme.

9. Select one of the items on the page and, on the Format tab, with the General area selected, change the theme.

   The content item whose theme you explicitly set has changed, while the second item, for which a theme was not explicitly selected, still uses the theme used for the page, as shown in the following image.