You can customize dashboard appearance through theme design, including theme templates, global styles, page layouts, widget styles, and other elements. This topic describes the theme settings available in the dashboard page settings.
Prerequisites
You have logged on to the Quick BI console and accessed the dashboard editing page. For more information, see Create a Dashboard.
Procedure
On the dashboard editing page, click Page Settings in the top menu bar.
You can click the
icon to expand or collapse the page settings panel.
On the Page Settings panel, click the Theme tab to configure the Dashboard Theme Template, Global Style, Page Layout, and other settings.
When you need to quickly find a specific configuration item, you can enter a keyword in the search box at the top to display the configuration options.
When you need to collapse all configuration categories at once, click the
icon to the right of the search box and select Collapse all categories.
Set the following parameters:
In the Dashboard Theme section, you can select an appropriate dashboard theme from the official themes or choose a custom-created theme.
Official Themes: Default, Deep Blue, Starry Sky, Technology, Activity, Minimalist, and Indigo are supported.
Custom Themes: You can select an existing custom theme.
Organization administrators can click Customize to access the Report Theme Management page to manage custom theme templates.
NoteQuick BI Professional Edition supports custom dashboard themes:
If you are an organization administrator, you can select an official recommended theme or add a custom theme.
If you are not an organization administrator, you can select an official recommended theme or an existing custom theme, but you cannot add a custom theme.
In the Global Style section, set the global style of the theme.
Chart configuration item
Description
Theme Mode
Light Mode and Dark Mode are supported.
When Light Mode is selected, the dashboard background color is white.
The default skin is Light Mode.
When Dark Mode is selected, the dashboard background color is black.
Chart Color Scheme
Supports system-configured Template Color Schemes and Custom Color Schemes.
When Chart Color Scheme is set to Template Color Scheme, you can select a color scheme from the dropdown list.
For example, when the color scheme is set to Advanced Gray, the chart appears as shown below after switching.
When Chart Color Scheme is set to Custom, you can modify the color of each color block.
NoteGradient Color Style applies to Indicator, Trend, and Comparison charts.
Page Font
Configure the font type for the chart page.
Card Border Radius
Configure the corner radius of chart cards, supporting no radius, small radius, or large radius.
Spacing
Supports Compact, Regular, and Custom options.
Card Spacing
Only available when Custom spacing is selected, allowing you to adjust the row and column spacing between cards.
Card Padding
Only available when Custom spacing is selected, allowing you to adjust the distance from the top, bottom, left, and right edges within the card.
Semantic Colors
In features such as conditional formatting and secondary metric display, colors are often used to visually convey information about data rising, remaining flat, falling, etc. In the Semantic Colors configuration, the system will automatically match different default semantic colors based on the theme selected in Chart Color Scheme. You can also customize the global color scheme for data trends, positive/negative values, status, and other meanings to better align with your business data viewing habits. This configuration will apply to the entire dashboard.
In the Page Layout section, configure the following parameters.
Chart configuration item
Description
Page layout
Select a layout for the dashboard content. Fit to content and Fit to window are supported.
Fit to content: Adjusts the dashboard size to fit all components, such as charts and query controls, based on their actual size and position.
Fit to window: Automatically adjusts the size based on the current browser window. You can also configure the page column layout.
Page Information
Configure the page information displayed on the dashboard, including the following: Title area, Storyline, and Footer.
Title area: Set whether to display the dashboard title area. If the title area is displayed, click the
icon to configure the following items.
Display main title: Show or hide the main dashboard title. If the main title is displayed, adjust its text style and configure a logo and content alignment.
Notes: Set whether to display notes in the main title area. If notes are displayed, click the
icon to customize the note content.
Content area bottom margin: Adjust the bottom margin of the main title area.
Cover background: Set the background color, overlay image, and height of the main title area.
Story Outline: Specifies whether to insert a story outline below the title area. When selected, the system automatically generates a story outline based on the layout order of the existing charts in the current dashboard. You can click the
icon next to Story Node to customize and edit the story outline in the Story Node Edit dialog box as needed.
Footer: Set whether to display the dashboard footer area. If the footer is displayed, click the
icon to configure the following items.
Footer text content: Set the text to display in the footer area as needed.
Footer area background: Set the background color, overlay image, and height of the footer area.
Page Background
Configure background color, supporting Solid Color, Gradient methods, and choose whether to overlay a background image.
Page Width
Supports Automatic Rotation, Fixed methods.
NoteWhen Fixed method is selected, you need to set the left and right margin pixel size. After setting, the left and right margins will be fixed and cannot be adjusted.
Page Margin
Supports Regular, Extra Wide Page, and Custom options.
In the Dashboard Background section, configure the following parameters.
Chart configuration item
Description
Top Image and Bottom Image
When selecting an image, you can choose Existing Images or Custom Images.
NoteWhen selecting a custom image, you can upload a local image or upload through the target image's link.
In the Dashboard Widgets section, configure the following parameters.
Chart configuration item
Description
Title
Text
Set the font size and alignment of the chart title.
Line Separator
Set the color and width of the title separator line.
Custom Title Background
Supports configuring the background and position of the title area.
When selecting solid color, you can configure the background color.
When selecting gradient, you can configure the gradient color scheme and gradient angle.
When selecting to overlay a background image, you can choose to use materials or custom images.
NoteWhen selecting a custom image, you can upload a local image or upload through the target image's link.
Title area position supports Inside Chart, Chart Edge, and Above Chart.
Status Icon
You can set the Status Icon to display on hover or always display, and set the color of the Status Icon.
Hide More Operations Entry in Preview Mode
After checking this configuration item, the entry for More Operations will be hidden in preview mode.
Background Style
Fill
Set whether to display fill color for the background.
Overlay Background Image
Add image materials or custom images to the chart background.
Border
Set whether to display a border for the background and the border color.
Show Shadow
Set whether to display a shadow for the background.
Empty Data Style
Text Content
Supports customizing the text prompt for empty data, default prompt: Data returned is empty.
Icon Style
Supports customizing the empty data icon style.
NoteWhen selecting Custom Image, you can upload a local image or upload through the target image's link.
Jump Link
After configuring the jump link, clicking the icon or text will jump to the link address.
In the Common Content Style section, configure the following parameters.
Chart configuration item
Description
Graph Style
Axis Title
Set the font size, color style, etc. of the axis title.
Axis Label
Set the font size, color style, etc. of the axis label.
Data Label
Set the font size, color style, etc. of the data label.
Tooltip
Set the font size, color style, etc. of the tooltip.
Legend
Set the font size, color style, etc. of the legend.
Table Style
Style Settings
You can set the style here, supporting Zebra Stripes, Wireframe, Simplified, Minimalist four styles.
Main Color Scheme
You can set the main color scheme here, supporting theme color, gray, and custom color schemes.
Table Header
Set the font size, color, etc. of the table header.
Content
Set the font size, color, etc. of the content.
In the TAB Widget section, configure the following parameters.
Chart configuration item
Description
TAB Selected Style
You can set the TAB selected style here, supporting underline, separator line, and selected block styles.
Tab Label Style
You can set the tab label font size, default state style, and selected state style here.
Show TAB Internal Visualization Card Border
Set whether to display the border of visualization cards inside the TAB, supporting color selection.
Custom spacing for components in a tab
Select this option to specify a custom value for the spacing between components within a tab. If this option is not selected, the spacing is determined by the dashboard's row and column spacing configuration.
NoteThe value can range from -32 to 32 px for PCs and from 0 to 20 px for mobile devices.
In the Query Control Area, configure the following parameters.
Chart configuration item
Description
Border
Set whether to display the query control border, supporting color selection.
Interactive Button
Supports setting the interactive button color.
Button Border Radius
Supports setting the button border radius.
Condition Spacing
Supports setting the condition spacing.
Condition Name
Supports setting the text style of the condition name.
Selection Box Style
Supports setting the selection box style.
Background Color
Supports setting the background color of the selection box.
Border
Supports setting the thickness and color of the selection box border.
Border Radius
Supports setting the border radius of the selection box.
Text
Supports setting the text color and font size of the selection box.
NoteThe configuration items in the Query Control Area apply to all global controls. However, if an individual query control has custom style configurations, the configuration here will not take effect. For example, if the selection box style in the Query Control Area is set to fill, but query control A has a selection box style set to wireframe in its style settings, the selection box style for query control A will be wireframe, and the selection box style configuration item in the Query Control Area will not apply to query control A.
After completing the configuration, click Save.