Dashboard Layout

For a created visual dashboard, you may hope that the layout of it can be set and beautified as you hope.

The layout of a dashboard can be gridded or free in FineBI.

By default, the layout is gridded, and you can set the gap between components. The free layout can be achieved by setting components to hover.

Grid Layout

Grid layout only supports vertical stretching, not horizontal stretching. Grid layout divides the plane into multiple cells according to rules, with each component occupying a certain number of cells. When the screen size changes, the cells are divided based on the actual width and height of the screen, while the relative proportion of the components to the entire screen remains unchanged.

There are gaps (can be canceled) among components by default. In addition, components can be set to stick to the top, and the components cannot be overlapped by others.

Free Layout

If you set components to hover, you can design a free layout, including freely adjusting the sizes of the components and placing the components. Besides, you can adjust the stacking order of the components.

You have added the visual components to the dashboard and completed the combination of them in the dashboard.

Setting Component Gap

Go to the dashboard editing page, and you can see there is a fixed gap between components by default, as shown in the following figure.

You can set the component gap by choosing Dashboard Style > Custom > Dashboard > Component Gap. For example, set the gap to 2.

The effect is shown in the following figure.

If you set components to hover, you can design a free layout. Besides, the components can be overlapped.

Setting Components to Hover

If you want to freely design the layout of the dashboard and adjust the order and position of the components, you can click , and select Hover from the drop-down list, as shown in the following figure.

Adjusting the Component Position

You can freely place the component and adjust its size despite the rules of grid layout after setting it to hover.

Setting Component Stacking Order

You can adjust the display order of two hovering components by setting Move to Top/Move to Bottom in Order, as shown in the following figure.