# 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).

- **Type:** Skill
- **Install:** `agentstack add skill-elastic-elastic-docs-skills-lens-chart-settings`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [elastic](https://agentstack.voostack.com/s/elastic)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [elastic](https://github.com/elastic)
- **Source:** https://github.com/elastic/elastic-docs-skills/tree/main/skills/project/lens-chart-settings
- **Website:** https://elastic.github.io/elastic-docs-skills/

## Install

```sh
agentstack add skill-elastic-elastic-docs-skills-lens-chart-settings
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

| 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:

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

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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [elastic](https://github.com/elastic)
- **Source:** [elastic/elastic-docs-skills](https://github.com/elastic/elastic-docs-skills)
- **License:** Apache-2.0
- **Homepage:** https://elastic.github.io/elastic-docs-skills/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-elastic-elastic-docs-skills-lens-chart-settings
- Seller: https://agentstack.voostack.com/s/elastic
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.