elastic · florent-leborgne · May 6, 2026 · May 6, 2026 · May 6, 2026 · May 6, 2026
@@ -17,7 +17,52 @@ 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}}.
 
-## Panel limits [dashboard-panel-limits]
+## 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       |
+
+Size panels to match what they show. Use these as starting points and adjust for the density of your data:
+
+| Chart type | Recommended width | Recommended height (rows) |
+| ---------- | ----------------- | ------------------------- |
+| KPI / metric | Quarter (12) | 4–6 |
+| Bar chart, gauge, pie | Half (24) | 8–12 |
+| Line chart, area chart (time series) | Third (16) to full (48) | 12–15 |
+| Heat map | Full (48) | 15–25 |
+| Table | Half (24) to full (48) | 15+ |
+
+Consider the following best practices to keep dashboards scannable as you add panels:
+
+* **Place KPIs and key trends above the fold.** On a 1080p screen, roughly 20–24 rows are visible without scrolling. Put metrics in the top row so viewers see the most important information first.
+* **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.
+* **Match panel width to importance.** Give primary charts more horizontal room, and group compact KPI metrics into narrower panels along a single row.
+* **Separate 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.
+
+A common starting layout puts KPIs first, charts in the middle, and a detail table at the bottom. Use two half-width charts per row, or three at third width when comparing multiple dimensions:
+
+```text
+┌──────────┬──────────┬──────────┬──────────┐
+│  KPI     │  KPI     │  KPI     │  KPI     │  4 × 12 cols, ~5 rows
+├──────────┴──────────┼──────────┴──────────┤
+│  Chart              │  Chart              │  2 × 24 cols, ~10–12 rows
+├─────────────────────┴─────────────────────┤
+│  Table or distribution chart              │  48 cols, 15+ rows
+└───────────────────────────────────────────┘
+```
+
+When you use the [Dashboards API](create-dashboards-programmatically.md) to author dashboards, you specify `x`, `y`, `w`, and `h` as grid coordinates directly. The dashboard editor's automatic packing no longer applies, so the same guidelines apply in your panel definitions.
+
+### Panel limits [dashboard-panel-limits]
 ```{applies_to}
 stack: ga 9.4
 serverless: ga
@@ -68,7 +113,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}

@@ -41,7 +41,7 @@ The API supports all panel types that have a defined schema, including visualiza
 
 Dashboard requests are subject to [panel limits](arrange-panels.md#dashboard-panel-limits): up to 100 top-level items (panels and sections combined), 100 panels per section, and 100 pinned controls. Requests that exceed these limits are rejected with a validation error.
 
-Refer to the [Dashboards API reference](https://elastic.github.io/dashboards-api-spec/dashboards#tag/Dashboards) for the full request schema, panel types, and authentication requirements.
+Refer to the [Dashboards API reference](https://elastic.github.io/dashboards-api-spec/dashboards#tag/Dashboards) for the full request schema, panel types, and authentication requirements. For panel sizing and layout guidance when specifying grid coordinates by hand, refer to [Organize dashboard panels](arrange-panels.md#dashboard-grid-layout).
 
 ## Visualizations API [lens-visualizations-api]
 ```{applies_to}

@@ -359,6 +359,8 @@ Drag panels by their header to reposition them, and drag the corner handles to r
 - **Middle rows:** arrange time series charts (line charts) and bar charts below the metrics. A moderate height (roughly 10–12 grid rows) gives charts enough room to be readable without wasting space.
 - **Bottom row:** use wider panels for tables that benefit from more horizontal space and can afford a taller height.
 
+For a panel sizing reference with recommended widths and heights for each chart type, refer to [Organize dashboard panels](dashboards/arrange-panels.md#dashboard-grid-layout).
+
 To reduce clutter, consider hiding redundant axis titles. For example, on a bar chart the x-axis title may not add value when the panel title already describes the data. To hide it, edit the panel in Lens, open the {icon}`brush` **Style** panel, then under **Bottom axis**, set **Axis title** to **None**.
 
 :::{image} /explore-analyze/images/kibana-learning-tutorial-dashboard-polished.png

@@ -68,7 +68,9 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 **Label clearly**
 :   Provide a descriptive title and axis labels that clearly communicate what the chart shows. For example, mention the metric being visualized ("Average Response Time") and reference the time period when relevant ("Dec 8-16, 2025").
 
-Refer to [Area chart settings](#area-chart-settings) to find all configuration options for your area chart.  
+Refer to [Area chart settings](#area-chart-settings) to find all configuration options for your area chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -77,6 +77,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Sort bars by value (ascending or descending) to make comparisons easier, or keep them in alphabetical/chronological order when the sequence matters.
 
 Refer to [](#settings) for a complete list of options.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 ::::
 
 ::::{step} Save the chart

@@ -67,6 +67,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Provide clear titles that explain what the gauge measures and what the target value represents.
 
 Refer to [Gauge chart settings](#gauge-chart-settings) to find all configuration options for your gauge chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -64,6 +64,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   For categorical axes, order values logically (alphabetically, by frequency, or by a natural ordering like days of the week). Use the **Sort order** [style setting](#appearance-options) to control how axis values are sorted.
 
 Refer to [Heat map chart settings](#heat-map-chart-settings) to find all configuration options for your heat map chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -64,8 +64,9 @@ You can tweak the appearance of your chart by adjusting axes, legends, and serie
 **Provide context**
 :   Add a legend and descriptive axis titles, or remove them for obvious axes.
 
-For layout, hierarchy, and color guidance on dashboards, check EUI’s [Dashboard good practices](https://eui.elastic.co/docs/dataviz/dashboard-good-practices/). 
 For more chart configuration options, go to the [Line chart settings](#settings) section.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -72,6 +72,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Use titles and subtitles to explain what the metric shows. "45,234" is a number, but "Active Users" as a title gives it meaning, and "Last 24 hours" as a subtitle makes it unambiguous.
 
 Refer to [](#settings) for a complete list of options.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 ::::
 
 ::::{step} Save the chart

@@ -62,6 +62,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Colors typically represent the vertical axis categories, making it easier to track how each category appears across columns.
 
 Refer to [Mosaic chart settings](#mosaic-chart-settings) to find all configuration options for your mosaic chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -66,6 +66,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Keep labels inside or close to slices when possible. For charts with many small slices or long labels, use the legend instead.
 
 Refer to [Pie chart settings](#pie-chart-settings) to find all configuration options for your pie chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -61,6 +61,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Region maps are choropleth maps, where color represents data values. Be aware that larger regions can visually dominate, even if their values are smaller.
 
 Refer to [Region map chart settings](#region-map-chart-settings) to find all configuration options for your region map chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -77,6 +77,8 @@ Tweak the appearance of the table to your needs. Consider the following best pra
 :   Adjust table density based on your use case. Use **Compact** for fitting more rows, **Expanded** for better readability.
 
 Refer to [](#settings) for a complete list of options.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 ::::
 
 ::::{step} Save the table

@@ -61,6 +61,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Use colors to add meaning (categories) or keep them neutral to focus attention on size differences.
 
 Refer to [Tag cloud chart settings](#tag-cloud-chart-settings) to find all configuration options for your tag cloud chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -61,6 +61,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Labels are automatically hidden on rectangles that are too small to fit them. If too many labels are missing, reduce the number of categories or increase the panel size.
 
 Refer to [Treemap chart settings](#treemap-chart-settings) to find all configuration options for your treemap chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart

@@ -63,6 +63,8 @@ Tweak the appearance of the chart to your needs. Consider the following best pra
 :   Arrange categories from largest to smallest or in a natural order (such as satisfaction ratings from low to high).
 
 Refer to [Waffle chart settings](#waffle-chart-settings) to find all configuration options for your waffle chart.
+
+For panel sizing and layout guidance, refer to [Organize dashboard panels](../../dashboards/arrange-panels.md#dashboard-grid-layout).
 :::::
 
 :::::{step} Save the chart