
docs-lens-chart-settings
Verify Kibana Lens chart UI settings against the source code. Use when documenting chart types, reviewing chart settings accuracy, or checking UI labels and rendering order for Lens visualizations (bar, line, area, pie, treemap, mosaic, waffle, tag cloud, heat map, gauge, metric, region map, table).
- Installs
- 145
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/elastic/elastic-docs-skills --skill docs-lens-chart-settings- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads docs-lens-chart-settings automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Verifying Kibana Lens Chart Settings from Source Code
When documenting Lens chart settings, always verify labels, options, and rendering order against the Kibana source code. Do NOT guess UI labels.
Key Principles
- UI labels come from i18n
defaultMessagestrings — always extract the exact label. - Rendering order in JSX = rendering order in the UI — document settings in the same order they appear in the component tree.
- Conditional rendering is everywhere — many settings only appear under specific conditions (chart type, selected options, number of dimensions). Trace the conditions.
- Shared components are parameterized per chart — the same
LegendSettingscomponent behaves differently for treemaps vs waffle vs pie based on props.
Source Code Layout
Partition charts (pie, donut, treemap, mosaic, waffle)
All partition-type charts share code under:
x-pack/platform/plugins/shared/lens/public/visualizations/partition/
├── partition_charts_meta.ts # Per-chart config (toolbar options, legend config)
├── toolbar/
│ ├── style_settings.tsx # Orchestrates Style panel sections
│ ├── titles_and_text_settings.tsx # Slice labels + Slice values options
│ ├── appearance_settings.tsx # Donut hole (pie/donut only)
│ └── legend_settings.tsx # Partition-specific legend wrapper
Shared legend component:
x-pack/platform/plugins/shared/lens/public/shared_components/legend/
├── legend_settings.tsx # Main legend settings (Visibility, Size, Truncation, Nested, Stats)
├── location/legend_location_settings.tsx # Position (only when `location` prop is defined)
└── size/legend_size_settings.tsx # Width/Size dropdown
Other chart types
Each chart type has its own directory under visualizations/:
visualizations/xy/for bar, line, areavisualizations/heatmap/visualizations/gauge/visualizations/metric/visualizations/tagcloud/
Verification Workflow
Step 1: Find the chart metadata
For partition charts, start with partition_charts_meta.ts. This file defines per-chart:
toolbar.categoryOptions— Slice labels options (or empty array if none)toolbar.numberOptions— Slice values options (or empty array if none)toolbar.emptySizeRatioOptions— Donut hole options (pie/donut only)toolbar.isDisabled— Whether the Style panel is disabled entirely (waffle)legend.defaultLegendStats— Enables Statistics/Show value in legend (waffle only)legend.hideNestedLegendSwitch— Hides the Nested toggle (waffle)legend.getShowLegendDefault— Default legend visibility behavior for Auto modemaxBuckets— Maximum Group by dimensions
Step 2: Trace the Style settings
Read toolbar/style_settings.tsx to understand the Style panel structure:
- If
emptySizeRatioOptionsexists → renders Appearance accordion + Titles and text accordion - If not → renders only
PartitionTitlesAndTextSettingsdirectly (no sub-headers)
Then read toolbar/titles_and_text_settings.tsx:
categoryOptionsrenders as the first button group (label: check i18n keyxpack.lens.pieChart.labelSliceLabels)numberOptionsrenders as the second button group (label: check i18n keyxpack.lens.pieChart.sliceValues)- If
numberDisplay === 'percent', a Decimal places input appears
If categoryOptions is empty, the first button group is hidden. If numberOptions is empty, the second button group is hidden. If isDisabled is true, the entire section is disabled/hidden.
Step 3: Trace the Legend settings
Read toolbar/legend_settings.tsx (partition wrapper) to see what props are passed to the shared LegendSettings component. Key props to check:
| Prop | What it controls | How to verify |
|---|---|---|
legendOptions | Visibility options (Auto/Show/Hide) | Always present for all partition charts |
position | Only renders if location is also passed | Partition charts do NOT pass location → Position hidden |
renderNestedLegendSwitch | Nested toggle | !hideNestedLegendSwitch && groups > 1 |
allowedLegendStats | Statistics/Show value | Only if defaultLegendStats defined in chart meta |
legendSize / onLegendSizeChange | Width dropdown | Renders if isVerticalLegend is true |
shouldTruncate / onTruncateLegendChange | Label truncation toggle | Always present when legend not hidden |
showAutoLegendSizeOption | Auto in size dropdown | Only for pre-8.3 visualizations |
Step 4: Determine rendering order
Read the shared legend_settings.tsx JSX top to bottom. For partition charts (no location prop), the actual rendering order is:
- Visibility (always)
- Width (when legend not hidden, via LegendSizeSettings)
- Label truncation + Line limit (when legend not hidden)
- Nested (when legend not hidden AND multiple groups AND not hideNestedLegendSwitch)
Settings that do NOT render for partition charts:
- Position — requires
locationprop (only XY charts pass this) - Statistics — requires
allowedLegendStats.length > 1 - Show value — requires exactly 1 allowed legend stat of type Value/CurrentAndLastValue
Step 5: Verify option labels
For each button group or dropdown, check the label or inputDisplay in the options array. Common pitfalls:
| What you might assume | Actual UI label | Source |
|---|---|---|
| "Labels" | "Slice labels" | xpack.lens.pieChart.labelSliceLabels |
| "Values" | "Slice values" | xpack.lens.pieChart.sliceValues |
| "Legend size" | "Width" | xpack.lens.shared.legendSizeSetting.label |
| "Truncate" | "Label truncation" | xpack.lens.shared.labelTruncation |
| "Max lines" | "Line limit" | xpack.lens.shared.maxLinesLabel |
| "Show" (legend) | "Show" | xpack.lens.pieChart.legendVisibility.show |
Quick Reference: Per-Chart Differences
| Feature | Pie/Donut | Treemap | Mosaic | Waffle |
|---|---|---|---|---|
| Slice labels | Hide/Inside/Auto | Hide/Show | (none) | (none) |
| Slice values | Hide/Integer/Percentage | Hide/Integer/Percentage | Hide/Integer/Percentage | (none) |
| Donut hole | Yes | No | No | No |
| Style panel disabled | No | No | No | Yes |
| Legend Position | No | No | No | No |
| Legend Width | Yes | Yes | Yes | Yes |
| Nested legend | Yes (>1 group) | Yes (>1 group) | Yes (>1 group) | No |
| Show value | No | No | No | Yes |
| Statistics | No | No | No | No |
| Default legend visibility | Auto shows when >1 bucket | Auto hides | Auto hides | Auto shows always |
| Max Group by dimensions | 3 | 2 | 2 | 1 |
| Color mapping | First Group by only | First Group by only | Vertical axis | Group by |
Common Mistakes to Avoid
- Assuming Position exists for partition charts — it doesn't. Only XY-type charts have Position.
- Using "Legend size" instead of "Width" — the actual label is "Width".
- Including Auto in Width options — Auto only shows for pre-8.3 visualizations.
- Documenting Statistics for non-waffle charts — only waffle has
defaultLegendStats. - Assuming "Titles and text" sub-header exists for all charts — it only appears when
emptySizeRatioOptionsis defined (pie/donut). - Getting the Nested legend condition wrong — it requires both
hideNestedLegendSwitch !== trueAND multiple Group by dimensions. - Assuming color mapping works on all Group by levels — only available on the first dimension.
FAQ
What does the docs-lens-chart-settings skill do?
Verify Kibana Lens chart UI settings against the source code. Use when documenting chart types, reviewing chart settings accuracy, or checking UI labels and rendering order for Lens visualizations (bar, line, area, pie, treemap, mosaic, waffle, tag cloud, heat map, gauge, metric, region map, table).
How do I install docs-lens-chart-settings?
Run npx skills add https://github.com/elastic/elastic-docs-skills --skill docs-lens-chart-settings in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/docs-lens-chart-settings/ (personal) or .claude/skills/docs-lens-chart-settings/ (project).
Which AI agents can use docs-lens-chart-settings?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is docs-lens-chart-settings safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains docs-lens-chart-settings?
It is published by elastic in elastic/elastic-docs-skills. It has 145 recorded installs.
More from elastic/elastic-docs-skills
create-skill
elastic/elastic-docs-skills
Interactively create a new Claude Code skill and add it to the elastic-docs-skills catalog. Use when the user wants to generate a new skill, scaffold a slash command, or build automation for docs tasks.
docs-skill-review
elastic/elastic-docs-skills
Open the skill to read its SKILL.md instructions.
docs-review-changelog
elastic/elastic-docs-skills
Open the skill to read its SKILL.md instructions.
docs-flag-jargon-skill
elastic/elastic-docs-skills
Flag Elastic-internal jargon in documentation and suggest plain-language replacements. Use when the user asks to check or review docs for terms that external readers would not understand, or when a docs review runs. Do not trigger on ordinary drafting or editing.
docs-check-style
elastic/elastic-docs-skills
Open the skill to read its SKILL.md instructions.
docs-frontmatter-audit
elastic/elastic-docs-skills
Audit Elastic documentation files for frontmatter completeness and correctness. Checks products, description, and navigationtitle fields across a directory. Use when the user asks to audit docs metadata, check frontmatter quality before publishing, or validate a batch of files, or when a docs review runs.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.