MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads docs-lens-chart-settings automatically when relevant.

  3. 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.

<!-- Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Elasticsearch B.V. licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -->

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

  1. UI labels come from i18n defaultMessage strings — always extract the exact label.
  2. Rendering order in JSX = rendering order in the UI — document settings in the same order they appear in the component tree.
  3. Conditional rendering is everywhere — many settings only appear under specific conditions (chart type, selected options, number of dimensions). Trace the conditions.
  4. Shared components are parameterized per chart — the same LegendSettings component 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, area
  • visualizations/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 mode
  • maxBuckets — Maximum Group by dimensions

Step 2: Trace the Style settings

Read toolbar/style_settings.tsx to understand the Style panel structure:

  • If emptySizeRatioOptions exists → renders Appearance accordion + Titles and text accordion
  • If not → renders only PartitionTitlesAndTextSettings directly (no sub-headers)

Then read toolbar/titles_and_text_settings.tsx:

  • categoryOptions renders as the first button group (label: check i18n key xpack.lens.pieChart.labelSliceLabels)
  • numberOptions renders as the second button group (label: check i18n key xpack.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:

PropWhat it controlsHow to verify
legendOptionsVisibility options (Auto/Show/Hide)Always present for all partition charts
positionOnly renders if location is also passedPartition charts do NOT pass location → Position hidden
renderNestedLegendSwitchNested toggle!hideNestedLegendSwitch && groups > 1
allowedLegendStatsStatistics/Show valueOnly if defaultLegendStats defined in chart meta
legendSize / onLegendSizeChangeWidth dropdownRenders if isVerticalLegend is true
shouldTruncate / onTruncateLegendChangeLabel truncation toggleAlways present when legend not hidden
showAutoLegendSizeOptionAuto in size dropdownOnly 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:

  1. Visibility (always)
  2. Width (when legend not hidden, via LegendSizeSettings)
  3. Label truncation + Line limit (when legend not hidden)
  4. Nested (when legend not hidden AND multiple groups AND not hideNestedLegendSwitch)

Settings that do NOT render for partition charts:

  • Position — requires location prop (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 assumeActual UI labelSource
"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

FeaturePie/DonutTreemapMosaicWaffle
Slice labelsHide/Inside/AutoHide/Show(none)(none)
Slice valuesHide/Integer/PercentageHide/Integer/PercentageHide/Integer/Percentage(none)
Donut holeYesNoNoNo
Style panel disabledNoNoNoYes
Legend PositionNoNoNoNo
Legend WidthYesYesYesYes
Nested legendYes (>1 group)Yes (>1 group)Yes (>1 group)No
Show valueNoNoNoYes
StatisticsNoNoNoNo
Default legend visibilityAuto shows when >1 bucketAuto hidesAuto hidesAuto shows always
Max Group by dimensions3221
Color mappingFirst Group by onlyFirst Group by onlyVertical axisGroup by

Common Mistakes to Avoid

  1. Assuming Position exists for partition charts — it doesn't. Only XY-type charts have Position.
  2. Using "Legend size" instead of "Width" — the actual label is "Width".
  3. Including Auto in Width options — Auto only shows for pre-8.3 visualizations.
  4. Documenting Statistics for non-waffle charts — only waffle has defaultLegendStats.
  5. Assuming "Titles and text" sub-header exists for all charts — it only appears when emptySizeRatioOptions is defined (pie/donut).
  6. Getting the Nested legend condition wrong — it requires both hideNestedLegendSwitch !== true AND multiple Group by dimensions.
  7. 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

View all →

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 & Writing168 installs

docs-skill-review

elastic/elastic-docs-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing151 installs

docs-review-changelog

elastic/elastic-docs-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing149 installs

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 & Writing148 installs

docs-check-style

elastic/elastic-docs-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing148 installs

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.

Docs & Writing148 installs

Popular docs & writing skills

View category →

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.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs