Docs Lens Chart Settings

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:

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

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

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:

Quick Reference: Per-Chart Differences

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.