docs: add Best practices for creating dashboards page (#5449, #5445)#6340
Draft
florent-leborgne wants to merge 5 commits intomainfrom
Draft
docs: add Best practices for creating dashboards page (#5449, #5445)#6340florent-leborgne wants to merge 5 commits intomainfrom
florent-leborgne wants to merge 5 commits intomainfrom
Conversation
Creates explore-analyze/dashboards/dashboards-best-practices.md as the
single, opinionated source of dashboard design guidance for {{kib}}.
Covers the 48-column grid, grid packing rules, information hierarchy,
per-chart sizing with concrete row counts, panel titling, panel-type
selection, three reusable layout patterns (Operational, Analytical,
Executive), and performance tuning.
Adds discoverability pointers from related pages so the page lives
naturally in the dashboards ecosystem:
- Dashboards overview and Building dashboards (parent hubs)
- Create a dashboard, Organize dashboard panels (UI-side how-tos),
with the resize bullet linking to the grid section
- Create dashboards programmatically (API context for packing rules)
- Lens overview and Text panels (visualization authoring entry points)
- All 13 individual Lens chart pages, in the existing "Customize the
chart to follow best practices" build step
Replaces the external EUI dashboard-good-practices link in
line-charts.md with the new internal page, since dashboard guidance
is now first-party.
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
Elastic Docs AI PR menuCheck the box to run an AI review for this pull request.
Powered by GitHub Agentic Workflows and docs-actions. For more information, reach out to the docs team. |
This was referenced May 7, 2026
Contributor
Contributor
Vale Linting ResultsSummary: 2 warnings found
|
| File | Line | Rule | Message |
|---|---|---|---|
| explore-analyze/dashboards/create-dashboard.md | 19 | Elastic.QuotesPunctuation | Place punctuation inside closing quotation marks. |
| explore-analyze/dashboards/dashboards-best-practices.md | 28 | Elastic.Spelling | 'wireframe' is a possible misspelling. |
The Vale linter checks documentation changes against the Elastic Docs style guide.
To use Vale locally or report issues, refer to Elastic style guide for Vale.
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Information hierarchy: add focal point and proximity bullets - Title and label panels: add number formatting and repeated-word bullets - New section: Use color deliberately (palette choice, sequential vs divergent, color count, brand customization) - New section: Apply consistent dashboard settings (margins, sync color palettes, sync cursor and tooltips), pointing to create-dashboard.md for the full list Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a single, opinionated guidance page for designing effective {{kib}} dashboards, and routes existing pages to it instead of fragmenting the same advice across many places.
This PR closes both #5449 (grid documentation) and #5445 (dashboard design best practices). It replaces the earlier #6329 and #6330, which split the guidance across multiple pages. Both have been closed in favor of this consolidated approach.
What's new
explore-analyze/dashboards/dashboards-best-practices.md(new). Sections:Discoverability pointers added
explore-analyze/dashboards.md— adds the page to the Build and customize dashboards list.explore-analyze/dashboards/building.md— closing pointer after the related-tasks list.explore-analyze/dashboards/create-dashboard.md— pointer in the page intro.explore-analyze/dashboards/arrange-panels.md— pointer in the intro and from the resize bullet, linking to#dashboard-grid.explore-analyze/dashboards/create-dashboards-programmatically.md— pointer at the end of the Dashboards API section, framed for API authors who set panel coordinates by hand.explore-analyze/visualize/lens.md— pointer near the intro for panel titles, axis labels, and dashboard sizing.explore-analyze/visualize/text-panels.md— pointer near the intro, anchored to#choose-panel-type.area,bar,gauge,heat-map,line,metric,mosaic,pie,region-map,tables,tag-cloud,treemap,waffle) — pointer added to the existing Customize the chart to follow best practices build step.explore-analyze/visualize/charts/line-charts.md— replaces the existing external EUI Dashboard good practices link with the new internal page.explore-analyze/toc.yml— adds the page under Building dashboards, after Organize dashboard panels and before Duplicate a dashboard.Sourcing of opinionated guidance
The numbers and patterns come from the
kibana-dashboardsandkibana-vegaagent skills in elastic/agent-skills-sandbox, reframed for a docs audience and verified against the {{kib}} source where applicable:DASHBOARD_GRID_COLUMN_COUNT = 48insrc/platform/plugins/shared/dashboard/common/page_bundle_constants.ts.DEFAULT_PANEL_WIDTH = DASHBOARD_GRID_COLUMN_COUNT / 2insrc/platform/plugins/shared/dashboard/common/constants.ts.Resolves
Replaces