docs: add Best practices for creating dashboards page (#5449, #5445)#6340
Draft
florent-leborgne wants to merge 5 commits into
Draft
docs: add Best practices for creating dashboards page (#5449, #5445)#6340florent-leborgne wants to merge 5 commits into
florent-leborgne wants to merge 5 commits into
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>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Docs review summary
Focus areas
- Style and clarity: One accessibility bug (empty link text, line 127). Vale found no findings. Writing is clear and well-structured overall.
- Jargon:
{{agent-builder}}is a substitution variable consistent with existing pages in this directory; no unexplained jargon found. - Frontmatter and applies_to: Description is present, plain text, no substitution variables, under 200 chars.
products,navigation_title, andapplies_toare all present and follow the pattern used in sibling files. - Content type fit: Declared as
type: overview. The page is best-practices guidance rather than a conceptual "what is X" overview, but this is a reasonable fit given that best-practices pages in this section don't map cleanly to how-to or tutorial types. No change recommended. - Parent issue satisfaction: Closes #5449 (grid documentation) and #5445 (dashboard design best practices). Both are well-covered — the grid section documents the 48-column layout with a reference table, and the design guidance spans hierarchy, sizing, color, layout patterns, and performance. Satisfied.
Nits
- Lines 106 and 108: Example panel titles (
"Requests by response code","count by status","Usage") use double quotes. Per the style guide, double quotes are for quoted error messages or first-use unfamiliar terms. Since these are concrete UI text values being recommended, monospace backticks (e.g.,`Requests by response code`) would be more consistent with Elastic formatting conventions.
Generated by Docs review agent for issue #6340 · ● 433.2K
| A handful of dashboard-wide settings control how the whole dashboard reads. Set them deliberately when you create the dashboard so panels look like they belong together. Find them in the **Settings** menu in the application menu. | ||
|
|
||
| * **Use margins between panels.** Margins create visual breathing room and signal which panels belong to the same group. Keep them on for most dashboards. | ||
| * **Sync color palettes across panels.** Applies the same color to the same value across every panel. Refer to [](#use-color) for why this matters. |
Contributor
There was a problem hiding this comment.
Empty link text ([](#use-color)) is inaccessible — screen readers will read it as a bare URL fragment with no label.
Suggested change
| * **Sync color palettes across panels.** Applies the same color to the same value across every panel. Refer to [](#use-color) for why this matters. | |
| * **Sync color palettes across panels.** Applies the same color to the same value across every panel. Refer to [Use color deliberately](#use-color) for why this matters. |
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