Dashboard Style

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.

Custom Style Setting

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.

Basic Style Setting

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

Dashboard Style Setting

1. Click Dashboard to set the style. You can set Background and Component Gap of the dashboard.

Set the background color to blue-purple, and set the component gap to 12, as shown in the following figure.

Note: 

If the components are set to be overlapped, the components can still be displayed overlapped, even if there is a gap between the components set in Dashboard Style.

2. The following table shows the dashboard setting.

Component Style Setting

Component Title

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

 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.

Chart Style Setting

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

The following table describes chart settings in detail.

Table Style Setting

1. You can set the styles of all table components in the dashboard, including Style, Theme Color, Text, and the scrollbar.

If you select Custom in Text, you can set the font style of Header and Body respectively.

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

The following table describes table settings in detail.

Filter Component Style Setting

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.

Filter Component Settings	Description
Title Background	The title background can be set to Color or Image. Color: Click Color to set the background color. You can customize the color, or click Transparent or Auto. Image: Click Image to upload an image as the dashboard background. There are no requirements for the size and pixels of the background image.
Title Font	The title font can be set to Auto or Custom. For details, see Editing Component Title.
Component Background	The component background can be set to Color or Image. You can also set the thickness, color, and rounded corner of the component border.
Theme Color	You can set the theme color of the filter component selection box.

Image Component Style Setting

You can customize the background, the rounded corner, and the border of the image component.

If you upload an image with a transparent background, the component background is white by default. You can adjust the image background to transparent or any color in Dashboard Style, or you can upload another image as the background, as shown in the following figure. 

You can also set Rounded Corner and Border for the image component, as shown in the following figure.

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.