Colors and Themes

The default visualization colors and font styles are set by a “theme” that applies to the entire Qrvey app. The default theme can be modified, and many settings can be further customized within each chart’s configuration. This article explains how to apply colors and adjust font styles for charts and panels.

Chart Colors

Certain charts (e.g., Bar and Line) use a single color by default, focusing attention on data values rather than categories. The default single color (Main color) can be changed from the Chart Builder Toolbar or the Styles config. This change applies only to the current chart.

To use a different color for each category, select Color Type > By Category from the Color Type dropdown in the Styles section. This is useful when categories have specific meanings (e.g., red for delayed, green for on time). The default color sequence is shown and used, cycling through 10 pre-set colors. To fix category-color associations, select Match colors across charts. See Assigning Fixed Colors to Categories for details.

Multi-Color Charts

Certain charts (e.g., Pie, Funnel) always use a color sequence, similar to single-color charts set to By Category. The default sequence can be changed from the Chart Builder Toolbar or Styles section. There are 14 predefined color sequences, each with 10 colors, assigned to categories in order and repeated as needed.

Assign Fixed Color to a Category

There are occasions when colors have specific meanings in your analytics and you wish to customize the colors assigned to each category of data, rather than going with the defaults chosen by the product. For example, if you are displaying the volume of sales of different flavors of ice creams, you may want to assign pink to strawberry, brown to chocolate flavor, and cream to vanilla. You may also want to use the same three colors consistently across all visualizations that are based on the same dataset.

To achieve this effect select the Match colors across charts checkbox in the Styles section of the Configuration Panel. Doing so will cause a palette icon to appear next to the selected color sequence. Clicking on the icon opens a dialog to list all of the categories and their assigned colors. Each color can be modified individually to fit your preferences. Furthermore, the chosen colors will persist across all charts that are created based on the same dataset.

Themes

In Chart Builder, you can customize chart colors. Customizations apply only to the chart being edited and do not affect defaults for other charts. The Match colors across charts setting is an exception, but it only applies to charts based on the same dataset. These selections affect only colors, not panel style, fonts, or other settings.

To give all your charts a unified look and feel, use the Style Themes feature to create a customized theme that replaces the default theme settings. Beginning with version 8.1, this feature provides the following default themes:

• Qrvey Theme. A legacy default theme.
• Qrvey Theme 2. The default theme introduced in version 8.1. This expands the number of colors provided in the Data Visualization section from 20 to 100.
• Qrvey Dark Theme. Applies a dark mode to the dashboard, charts, and chart panels.

Create a Theme

1. Click the Style Themes icon in the toolbar of a Dashboard, Workflow, or Pixel perfect Report. The Style Themes dialog displays.
2. Click Create New Theme. The Create New Theme dialog displays.
3. Follow the steps described in "To modify theme settings" below.

Edit a Theme

1. Click the Style Themes icon in the toolbar. The Style Themes dialog displays.
2. Locate the theme you want to edit, click its three-dot menu, and click Edit. The Edit Theme dialog displays.
3. Follow the steps described in "To modify theme settings" below.

Modify Theme Settings

1. Create a new theme or edit an existing theme. The Create New/Edit Theme dialog displays.
2. To apply this theme to all applications, select Use Theme in All Apps.
3. Click the Typeface drop-down menu and select a font to use in the application. To use the default font, select (Default).

   Note: If you intend to use CSS to modify the typeface, select (Default). For more information, see Customizing the Appearance Using CSS.

4. Under Workspace Settings, select the following colors:
   • Canvas Background Color
   • Panel Icons and Foreground Color
5. Under Panel Styles, select whether to display or hide the following panel items:
   • Header
   • Title
6. Click the box next to Panel Background Color to display the color picker dialog. Use the options provided to set a color.
7. If displaying the title, click the box next to Chart Titles Color to display the color picker dialog. Use the options provided to set a color.
8. Under Text Styles, click the box next to each text item to display the color picker dialog. Use the options provided to set a color for that text item.
   • Axis and Data Labels
   • Values
   • Legends
   • Tooltips
9. Under Data Styles, click the box next to Main Color to display the color picker dialog. Use the options provided to set the main color for the data.
10. Select the colors to use for Data Visualizations. For your convenience, one hundred colors are chosen randomly by the system. You may change any of the colors individually, or you may click Generate New to randomly generate a new set of one hundred colors.
11. Under Table Header Styles, click the box next to each option to display the color picker dialog. Use the options provided to set a color for that text item.

• Header Font Color
• Header Background Color

11. Click Save Theme. Once created, a theme can be further edited, chosen to apply to all of your applications, duplicated to be used as the basis for another theme, or deleted, from the three-dot menu on the theme card.

Duplicate a Theme

1. Click the Style Themes icon in the toolbar. The Style Themes dialog displays.
2. Locate the theme you want to duplicate, click its three-dot menu, and click Duplicate. The new theme displays in the Style Themes dialog. You may now choose to Edit, Duplicate, or Delete the theme as needed.

Delete a Theme

A theme in a “shared application” that has been created by someone else, can only be deleted by the owner of the application. Such a theme will not have the Delete option in the menu.

1. Click the Style Themes icon in the toolbar. The Style Themes dialog displays.
2. Locate the theme you want to delete, click its three-dot menu, and click Delete. A dialog displays verify that you wish to delete the theme.
3. Click Yes. The theme is deleted.

Access a Theme Programmatically

Embedded widgets support the use of CSS variables to customize the visual theme. For more information, see Customizing the Appearance Using CSS.

Each theme has a unique ID that can be used for accessing the theme programmatically. The Theme ID is always displayed in the UI from the list of themes. Developers can copy and paste the ID of the desired theme into the embedded widget JSON configuration code, if they need to handle the theme programmatically.