Dashboard Styles

Version

Application Scenario

After creating a dashboard, you want to beautify the dashboard by changing and customizing the dashboard style.

You may also want to reuse saved custom styles when creating other dashboards.

Function Description

FineBI allows you to set the dashboard style, including the background, title, components, chart/table styles, color, and theme of filter components.

• You can select a dashboard with a preset style.

• You can customize the dashboard style.

• You can use the custom style of this dashboard in any other dashboard by clicking Save as Default Style to save the custom style in preset styles.

The following table describes setting instructions for three dashboard styles.

Preset Dashboard Style	Style Instruction
Custom Style	Only the current user can add, delete, and rename custom styles. A user can add no more than three custom styles. Note: If you want to modify the custom style, you can click the target dashboard style to set a custom style, then click Save as Default Style, and delete the original dashboard style.
Global Style	Only admins can add, delete, modify, and rename global styles. Admins can add no more than five global styles. The default style of the dashboard is the global style set by the admin. For details, see BI Global Style.
Preset Style	The system contains preset styles which cannot be deleted, modified, or renamed.

Preconditions

You have already created the components and added them to the dashboard.

Limitation

• Condition that saved custom styles take effect: All dashboards you have created can be set to previously saved custom styles.

• Condition that unsaved custom styles take effect: the current dashboard

• If the component is not added to the dashboard, the component style is the default style. If the component is added to the dashboard, the component will inherit the already set dashboard style.

• The priority order of the dashboard style that takes effect: component style > dashboard style > BI global style

• The default dashboard style can only be modified by admins. For details, see BI Global Style.

• The background styles of some components and those of component titles may be affected by older versions of Internet Explorer (generally older than IE10).

Go to the editing page of the analysis subject, select the corresponding dashboard, and click Dashboard Style.

Click Preset to set the dashboard style and click OK to save the style.

Click Dashboard Style on the dashboard editing page, and click Custom to go to the style editing page, as shown in the following figure.

Note:

After you set the custom style, the preview effect will be automatically displayed in the dashboard. The custom style takes effect only when you click OK. If the custom style is not saved as a default style, it will only take effect on this dashboard.

The following table shows custom dashboard style settings.

Setting the Basic Style

Set Basic Style to Blue Gray. You can modify the style based on the basic style. 

Setting the Dashboard Style

Click Dashboard to set Background and Component Gap of the dashboard.

Set Background Color to Gray, and Component Gap to 12, as shown in the following figure.

Note:

If a component is set to hover, it can still overlap with other components even if the component gap is set in the dashboard style.

The following table describes dashboard settings.

Setting the Component Style

Component Title

You can set Title Background and Title Font in the component setting.

1. Click Title Style and set it to Sci-fic Title Decoration.

2. Set Title Font to Custom and set the font color to black.

3. The following table describes title settings.

Component Background

You can set the background of all components in the dashboard, including Color and Component Style.

• Color

Set Color to Auto, Rounded Corner to 6 px, and Border to 2 and Blue. The effect is shown in the following figure.

• Component Style

The component background setting is shown in the following figure.

Note:

Component styles can be set to Custom Image or other various styles. Custom images can be uploaded as the background. There are no requirements for the size and pixels of the background images.

Hover Shadow

You can determine whether to display component hover shadows in 6.0.16. You can disable the shadow for a dashboard with multiple hover components, beautifying the dashboard effect.

The following figure shows the preview effect of displaying the hover shadow.

The following figure shows the preview effect of disabling the hover shadow.

Setting the Chart Style

You can set the style of Color Matching and Text of charts in the dashboard. 

The following table describes chart settings in detail.

Setting the Table Style

You can set the style of all table components in the dashboard, including Style, Theme Color, Text, and Scrollbar.

You can set the font style of Header and Body in Text.

After customizing the text style, you can view the effect as shown in the following figure.

The following table describes table settings in detail.

Setting the Filter Component Style

You can set the style of all filter components in the dashboard, including Title Background, Title Font, Component Background, and Theme Color.

Set Title Background to Red, Title Font to Auto, Component Background Color to Red, Rounded Corner to 6 px, and Border to 3. Then set Theme Color to Red.

After the custom dashboard style is set, you can click Save as Default Style to save the custom style if you need to reuse it in other dashboards. Then the custom style will appear in the preset styles. 

Note:

One user can add no more than three custom styles.

In the Preset tab, you can click the added custom style title to rename it.

Note:

Only admins can rename the global style set by themselves and the preset styles from one to six in the system cannot be modified.

Hover the mouse over the saved custom style, and you will find a Delete icon in the upper left corner. Click the icon and then click OK to delete it. 

Note:

Only admins can delete the global style set by themselves and the preset styles from one to six in the system cannot be modified.