Chart Component Style

Version

Application Scenario

You can beautify components and change their styles through the settings in Component Style.

Function Description

You can set styles of the axis, grid line (including the horizontal grid line and vertical grid line), legend, title display status, background, adaptation display, and interaction property for chart components, as shown in the following figure.

Note:

You can select/deselect the checkbox next to some settings to determine whether the corresponding style is displayed in the component.

Grid lines are auxiliary lines and extensions of the tick marks on the coordinate axis, helping you easily view data. You can hide grid lines by deselecting the checkbox next to Grid Line, as shown in the following figure.

Horizontal Grid Line

You can set the horizontal grid line for chart components when indicators exist on the vertical axis. You can set the line display status, line type, line width, and line color for the horizontal grid line, as shown in the following figure.

Note:

 If you deselect the checkbox next to Horizontal Grid Line, the horizontal grid line will be hidden.

Vertical Grid Line

You can set the vertical grid line for chart components when indicators exist on the horizontal axis. You can set the line display status, line type, line width, and line color for the vertical grid line with the same method as that of the horizontal grid line, as shown in the following figure.

Note:

If you deselect the checkbox next to Vertical Grid Line, the vertical grid line will be hidden.

The axis refers to the coordinate axis.

You can customize the line type (dashed or solid), line width, and line color of the axis, as shown in the following figure.

Note:

If you deselect the checkbox next to Axis, the axis will be hidden.

You can set partition lines for partition charts. You can customize the line type (dashed or solid), line width, and line color of the partition line, as shown in the following figure.

Note:

If you deselect the checkbox next to Partition Line, the partition line will be hidden.

For details, see Chart Legends.

Note:

The legend is displayed at the bottom by default in FineBI 6.0.15 and later versions.

You can set Title/Component Background to Color (can be set to Transparent or other colors) or Title/Component Style (can be set to Custom Image or five built-in styles).

For example, set the title color to yellow and set the component background to Sci-fi Dashboard Style, as shown in the following figure.

Note:

You can upload the background image with any size and pixel.

If you use the map component, you can also determine whether to set GIS (can be set to eight built-in styles or custom styles) in Component Background, as shown in the following figure.

Note:

For details about the GIS background, see Customizing GIS Layers.

If you set Component Color to Color, you can set the border width for the component, as shown in the following figure.

You can set Adaptation Display to Standard Adaptation, Overall Adaptation, Width Adaptation, or Height Adaptation, as shown in the following figure.

• Standard Adaptation (default setting): The component is displayed based on the optimal visual ratio.

• Overall Adaptation: All areas of the chart are fully displayed in the preview area, without the horizontal/vertical scroll bar.

• Width Adaptation: The width part (namely the horizontal part) of the chart is fully displayed in the chart preview area. The vertical part of the chart is displayed with the optimal ratio, which may result in the appearance of a vertical scroll bar.

• Height Adaptation: The height part (namely the vertical part) of the chart is fully displayed in the chart preview area. The horizontal part of the chart is displayed with the optimal ratio, which may result in the appearance of a horizontal scroll bar.

In FineBI 6.0.15 and later versions, component paddings can be configured. For components, especially those posting special requirements such as indicator cards, you can resize the top/bottom/left/right padding separately.

If Component Padding is set to 0, the component has no padding, as shown in the following figure.

After clicking the lock icon, you can simultaneously adjust the top and bottom/left and right padding for the component, as shown in the following figure.

You can select Transfer Indicator Condition During Linkage/Jump in Interaction Property.

The interaction property of chart components is consistent with that of the table component.