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, select a theme template.
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. You can 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 Information
Supports configuring title area content, story outline, and footer content.
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.
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.