Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion explore-analyze/dashboards/arrange-panels.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,28 @@ Customize your dashboard layout by arranging panels into logical groups and adju

To organize dashboard panels, you need the **All** privilege for the **Dashboard** feature in {{product.kibana}}.

## Dashboard grid layout and best practices [dashboard-grid-layout]

Dashboards use a 48-column grid with rows of fixed height. When you move or resize a panel, it snaps to column and row boundaries on this grid. New panels are created at half width (24 columns) by default.

Use these reference widths to keep panels aligned across a row:

| Panel width | Columns |
| ----------- | ------- |
| Full | 48 |
| Half | 24 |
| Third | 16 |
| Quarter | 12 |
| Sixth | 8 |


Consider the following best practices to keep dashboards scannable as you add panels:

* **Match panel shape to the chart.** Single-value metrics and KPIs work in compact panels of any shape. Time series, bar charts with many categories, and tables need horizontal room so axes and columns are not cramped. Pie and donut charts read best in roughly square panels.
* **Keep heights consistent within a row.** When several panels sit side by side, use the same height for all of them. Mismatched heights leave awkward gaps and make the row harder to read.
* **Use width to signal importance.** Give primary charts more horizontal room, and group dense KPI metrics into narrower panels along a single row. Use the column reference widths above to keep panels aligned.
* **Separate primary from secondary content with collapsible sections.** When a dashboard accumulates supporting panels and detail tables, place them inside a [collapsible section](#collapsible-sections) so the primary view stays focused and the dashboard loads faster.

## Arrange panels in collapsible sections [collapsible-sections]
```{applies_to}
stack: ga 9.1
Expand Down Expand Up @@ -54,7 +76,7 @@ Compare the data in your panels side-by-side, organize panels by priority, resiz
In the application menu, click **Edit**, then use the following options:

* To move, hover over the panel, click and hold ![The move control icon](/explore-analyze/images/kibana-move-control.png "The move control icon =4%x4%") and drag to the new location. Your screen scrolls automatically when you drag above or below the visible parts of the dashboard.
* To resize, click and hold the bottom right corner of the panel and drag to the new dimensions.
* To resize, click and hold the bottom right corner of the panel and drag to the new dimensions. Panels snap to a [48-column grid](#dashboard-grid-layout).
* To maximize to full screen, open the panel menu and click **Maximize**.

::::{tip}
Expand Down
Loading