feat(legend): Add option to truncate legend labels in the middle by awahab07 · Pull Request #2771 · elastic/elastic-charts

awahab07 · 2026-01-19T00:30:11Z

Summary

Legend labels can now be truncated in the middle, preserving both the beginning and end of long labels for better readability. This is especially useful for service names, URLs, and file paths where distinguishing information often appears at both ends. ~~Note that the middle truncation will be the default behavior going forward.~~ (After a discussion, it's been decided not to set it by default, so the existing behavior, truncationPosition'end' will be set by default)

The new truncationPosition option in theme.legend.labelOptions supports:

'middle': Truncates in the middle → enterprise-au…ion-service
'end' (default): Traditional CSS truncation → enterprise-authentication-an…

The story Legend -> Label Truncation demonstrate the feature:

1925_legend-middle-truncation.mov

1925_Cross-Browser_legend-middle-truncation.mov

Details

Added truncationPosition property to LegendLabelOptions interface ('middle' | 'end')
Iterative refinement algorithm: Uses canvas measureText with max 5 iterations for accurate text fitting
Cross-browser compatibility: Tested on Chrome, Firefox, Safari, and Edge
- Safari: Added resetWrapText mixin to fix single-line end truncation
- All browsers: line-break: anywhere for accurate multiline breaking
The following stories have also been updated to show truncationPosition knob
- Legend -> Piechart
- Legend -> Actions
- Legend -> Single Series
- Legend -> Tabular Data

Usage

<Settings
  showLegend
  theme={{
    legend: {
      labelOptions: {
        maxLines: 1,
        truncationPosition: 'middle', // 'middle' | 'end', default: 'end'
      },
    },
  }}
/>

Issues

Implements the upstream (elastic-charts) side of #1925

Checklist

The proper chart type label has been added (e.g. :xy, :partition)
The proper feature labels have been added (e.g. :interactions, :axis)
All related issues have been linked (i.e. closes #123, fixes #123)
New public API exports have been added to packages/charts/src/index.ts
Unit tests have been added or updated to match the most common scenarios
The proper documentation and/or storybook story has been added or updated
The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
Visual changes have been tested with light and dark themes

- Add truncationPosition option to LegendLabelOptions ('middle' | 'end') - Default to 'middle' truncation which preserves start and end of labels - Implement useMiddleTruncatedLabel hook using avg char width estimation - Add Storybook story demonstrating truncation behavior - Update all theme files with new default

- Add truncationPosition knob to Legend Actions story - Add truncationPosition knob to Tabular Data story - Rename control groups to 'Legend options' for consistency

delanni · 2026-01-19T09:08:36Z

buildkite test this

- Use requestAnimationFrame for deferred computation to avoid blocking initial render - Implement iterative refinement algorithm for accurate text fitting (max 5 iterations) - Add buffer (1x ellipsis width) for consistent right-side alignment - Use targetWidth consistently for all comparisons to prevent overflow - Add isComputed state to toggle CSS classes only when JS truncation is ready - Use -webkit-line-clamp: none for multiline to disable CSS truncation - Add line-break: anywhere for accurate character-level line breaking - Progressive rendering: show CSS-truncated text until JS computation completes

- Wrap computeTruncatedLabel in startTransition for interruptible updates - Add fallback for React 16/17 compatibility (direct execution) - Debounce ResizeObserver callbacks with cancelAnimationFrame - Prevents queuing multiple computations during rapid resize

…. This is to prevent '...x' effect on legends labels when width is scarce.

awahab07 · 2026-01-28T10:43:33Z

When available width is too narrow (only a few characters can fit), middle truncation won't happen (see). As otherwise the legend labels end up showing '...x' or ....

This considers character count rather than actual width. So if the width is narrow, but multiple lines can fit more characters, middle truncation would still occur.

…uncation-for-legend-labels # Conflicts: # e2e/screenshots/all.test.ts-snapshots/baselines/legend/actions-chrome-linux.png # e2e/screenshots/all.test.ts-snapshots/baselines/legend/tabular-data-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-render-legend-action-on-mouse-hover-chrome-linux.png

This reverts all VRT screenshot updates to force a clean update from CI. The buildkite VRT bot will regenerate all affected screenshots with the latest code changes. Co-authored-by: Cursor <cursoragent@cursor.com>

…uncation-for-legend-labels # Conflicts: # e2e/screenshots/all.test.ts-snapshots/baselines/legend/changing-specs-chrome-linux.png # e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-description-only-chrome-linux.png # e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-legend-bottom-chrome-linux.png # e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-legend-top-chrome-linux.png # e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-only-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-render-non-split-series-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-bottom-legend-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/tooltip-placement-with-legend/should-render-tooltip-with-top-legend-chrome-linux.png # packages/charts/api/charts.api.md # packages/charts/src/components/legend/label.tsx # packages/charts/src/utils/themes/theme.ts

awahab07 · 2026-02-26T10:51:27Z

This PR now needs to address merge conflicts with #2784. The functionality may have conflicting behaviors as both PRs target legend rendering, thus the who functionality needs to be tested again.

awahab07 · 2026-03-03T16:19:39Z

@maryam-saeidi given the change in #2784 is of the same nature and had conflicts, could you smoke tests if things work as expected? (I've tested the changes introduced in this PR and they LGTM)

…uncation-for-legend-labels # Conflicts: # packages/charts/api/charts.api.md # packages/charts/src/utils/themes/amsterdam_dark_theme.ts # packages/charts/src/utils/themes/amsterdam_light_theme.ts # packages/charts/src/utils/themes/dark_theme.ts # packages/charts/src/utils/themes/legacy_dark_theme.ts # packages/charts/src/utils/themes/legacy_light_theme.ts # packages/charts/src/utils/themes/light_theme.ts # packages/charts/src/utils/themes/theme.ts # storybook/stories/legend/11_legend_actions.story.tsx # storybook/stories/legend/17_tabular_data.story.tsx

awahab07 · 2026-03-15T01:14:10Z

Both issues mentioned in #2771 (comment) has been dealt with.

When large legend labels are present and Line limit is 1, and legend Position is "Inside", legends go off the chart boundary:

Resolved in 5d6a890

Before	After

There's another behavior (not a bug but the way it's currently implemented) which affects this PR and need to be tackled is, when large legend labels are present, sizing doesn't affect the legend width:

Resolved in aa42c29

Before	After

…hart's width at minimum.

gvnmagni · 2026-04-02T12:23:15Z

@awahab07 pointed out a very important detail, which is that all existing legends would be affected by this new settings if we apply it by default. Therefore, I would feel safer to keep truncation at the end as default option, just for now, and evaluate eventually how and when apply the truncation at the middle (maybe when we recognize very long labels that are similar at the end, something smart), but that should probably happens at Lens level.

Long story short, I suggest to keep truncation at end as default while having truncation in the middle as an additional option available to user

…uncation-for-legend-labels # Conflicts: # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-all-values-in-stacked-chart-with-filtered-series-nick-chrome-linux.png # e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-render-legend-action-on-mouse-hover-chrome-linux.png # packages/charts/src/components/legend/label.tsx # storybook/stories/legend/2_legend_layout.story.tsx

…uncation-for-legend-labels

awahab07 · 2026-04-10T23:03:06Z

buildkite update vrt

elastic-datavis · 2026-04-10T23:34:51Z

✅ Successful Deployment (build#243) - `c971199`

awahab07 · 2026-04-11T17:01:27Z

ℹ️ These area chart snapshots have been updated because the PR fixes a behavior where legend labels overflow the chart in floating mode (legend inside chart layout). Notice the legends in the before snapshots extending out the chart borders. (see)

awahab07 · 2026-04-11T17:10:57Z

      const scrollBarDimension = legendHeight > parentDimensions.height ? SCROLL_BAR_WIDTH : 0;
      const staticWidth = spacingBuffer + actionDimension + scrollBarDimension;

+      const minWidth = parentDimensions.width * 0.05;


Setting 30% of total chart width as minimum for legend size is quite a large number, and may not be desirable for cases where just a few letters needs to be shown in legends. Hence reducing to 5%. (See for example)

we can probably set a fixed min in width? instead of a percentage, because for smaller chart this can be very small

awahab07 · 2026-04-11T17:17:16Z

Reason for style adjustments in this file (and also in .../legend/position_style.ts and .../legend/legend.tsx above).

awahab07 · 2026-04-11T17:21:58Z

This snapshot test has been renamed, hence old snapshot is deleted (also see a similar "../position-right/..." below).

walterra · 2026-04-20T07:38:19Z

+ *
+ * @internal
+ */
+export function useMiddleTruncatedLabel({


should this also include some debouncing check? or can we check that all external resizes are decounbed already?

walterra · 2026-04-20T07:42:48Z

      @include euiTextTruncate;
+
+      // When using middle truncation, JS handles the ellipsis. `clip` will disable euiTextTruncate
+      &--middle {


Nit: This creates --singleline--middle which isn't proper BEM terminology. Could we do --middle as a separate class and apply both or would that breat things?

markov00 · 2026-01-19T16:54:11Z

+    const computedStyle = window.getComputedStyle(element);
+    const { font, fontSize } = getFontFromComputedStyle(computedStyle);
+    const containerWidth = element.clientWidth;


This triggers page reflows and you don't need these as you already have these infos:

the font and fontSize are already around

the legend width is already computed

markov00 · 2026-01-19T16:55:25Z

+  useLayoutEffect(() => {
+    if (!shouldTruncate) {
+      setTruncatedLabel(label);
+      return;
+    }
+
+    computeTruncatedLabel();
+
+    const element = labelRef.current;
+    if (!element) return;
+
+    // Per-element ResizeObserver is necessary since label width varies by rendering mode (list, table, horizontal)
+    const resizeObserver = new ResizeObserver(() => {
+      computeTruncatedLabel();
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [computeTruncatedLabel, shouldTruncate, label]);
+
+  return {
+    labelRef: shouldTruncate ? labelRef : undefined,
+    truncatedLabel,
+  };


when computing things with canvas measureText you don't need all that, you can do it upfront

markov00 · 2026-04-23T13:35:31Z

+    });
+  });
+
+  http: test.describe('Legend tabular data', () => {


interesting fist time seeing a label used in JS. I don't think this is used at all

markov00 · 2026-04-23T13:40:07Z

+    const computedStyle = window.getComputedStyle(element);
+    const { font, fontSize } = getFontFromComputedStyle(computedStyle);


Why do we need to compute the font size? can we use a static one?
if this is because we depend on EUI and other font configured outside, we can probably bring this font configuration inside charts and be sure we don't need to compute it.
This is specially computationally intestive since it also run inside a useLayoutEffect()

Considering that this also run for each label, it seems too much. If really required this should be moved at an higer level

markov00 · 2026-04-23T13:46:00Z

      const scrollBarDimension = legendHeight > parentDimensions.height ? SCROLL_BAR_WIDTH : 0;
      const staticWidth = spacingBuffer + actionDimension + scrollBarDimension;

+      const minWidth = parentDimensions.width * 0.05;


we can probably set a fixed min in width? instead of a percentage, because for smaller chart this can be very small

markov00 · 2026-04-23T13:55:48Z

+    const element = labelRef.current;
+    if (!element) return;
+
+    const width = getStableContainerWidth(element);


In a condition where we have many labels this connected with the getComputedStyle below and useLayoutEffect create a regression in performance for the legend.
Can't we derive this value or at least derive it just one time for the entire legend instead for each?

awahab07 added 4 commits January 18, 2026 18:00

Add truncationPosition option to legend stories

adde860

- Add truncationPosition knob to Legend Actions story - Add truncationPosition knob to Tabular Data story - Rename control groups to 'Legend options' for consistency

Add 4% safety margin for Firefox text rendering differences

2b2650b

Revert changing action group in story.

a6e8f6c

awahab07 added the :legend Legend related issue label Jan 19, 2026

awahab07 and others added 7 commits January 22, 2026 09:35

Fix typings

e041d76

Fix Safari single-line end truncation with resetWrapText mixin

9dd1b8d

test(vrt): update screenshots [skip ci]

666ee61

Update API docs.

0f0961e

Do not truncate in the middle if legend available width is too narrow…

884f1c8

…. This is to prevent '...x' effect on legends labels when width is scarce.

elastic-datavis Bot and others added 9 commits January 28, 2026 11:10

test(vrt): update screenshots [skip ci]

49da38b

Merge branch 'main' into 1925_middle-text-truncation-for-legend-labels

da843bd

test(vrt): update screenshots [skip ci]

425aec4

chore: trigger CI after VRT update

f9ebd91

test(vrt): update screenshots [skip ci]

a4a4140

test(vrt): revert all screenshots to upstream main baseline

b433cfe

This reverts all VRT screenshot updates to force a clean update from CI. The buildkite VRT bot will regenerate all affected screenshots with the latest code changes. Co-authored-by: Cursor <cursoragent@cursor.com>

test(vrt): update screenshots [skip ci]

c5fecb8

awahab07 marked this pull request as draft February 26, 2026 10:51

elastic-datavis Bot and others added 4 commits March 3, 2026 16:41

test(vrt): update screenshots [skip ci]

cd1f423

Fix typo in comment.

89d78ea

Remove default.

9ba7a8e

elastic-datavis Bot and others added 7 commits March 15, 2026 01:27

test(vrt): update screenshots [skip ci]

5667c59

Respect configured width and ensure legends always maintain a 5% of c…

fdbb58b

…hart's width at minimum.

Use minmax(0, auto) for gridTemplateColumns.

5a1c0f4

test(vrt): update screenshots [skip ci]

7e3cf54

Delete outdated snapshots.

873a67d

test(vrt): update screenshots [skip ci]

4be1d9a

Synchronous middle text truncation computation.

686324d

awahab07 and others added 6 commits April 9, 2026 19:55

Account for 'px' mode for middle truncation.

ad65ceb

Use 'end' as the default label truncationPosition.

c36bd88

test(vrt): update screenshots [skip ci]

4c445a1

Remove deleted/renamed test snapshots.

42f4200

Merge remote-tracking branch 'upstream/main' into 1925_middle-text-tr…

c971199

…uncation-for-legend-labels

awahab07 added the :all Applies to all chart types label Apr 11, 2026

awahab07 commented Apr 11, 2026

View reviewed changes

awahab07 marked this pull request as ready for review April 11, 2026 17:33

awahab07 requested review from markov00, nickofthyme and walterra April 11, 2026 17:33

awahab07 linked an issue Apr 12, 2026 that may be closed by this pull request

Allow text truncation in the middle for legend labels #1925

Open

walterra reviewed Apr 20, 2026

View reviewed changes

markov00 reviewed Apr 23, 2026

View reviewed changes

awahab07 marked this pull request as draft April 28, 2026 08:55

		const computedStyle = window.getComputedStyle(element);
		const { font, fontSize } = getFontFromComputedStyle(computedStyle);

Conversation

awahab07 commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Usage

Issues

Checklist

Uh oh!

delanni commented Jan 19, 2026

Uh oh!

awahab07 commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awahab07 commented Feb 26, 2026

Uh oh!

awahab07 commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awahab07 commented Mar 15, 2026

Uh oh!

gvnmagni commented Apr 2, 2026

Uh oh!

awahab07 commented Apr 10, 2026

Uh oh!

elastic-datavis Bot commented Apr 10, 2026

✅ Successful Deployment (build#243) - c971199

Uh oh!

awahab07 Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

awahab07 Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

awahab07 Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

awahab07 commented Jan 19, 2026 •

edited

Loading

awahab07 commented Jan 28, 2026 •

edited

Loading

awahab07 commented Mar 3, 2026 •

edited

Loading

✅ Successful Deployment (build#243) - `c971199`

awahab07 Apr 11, 2026 •

edited

Loading

awahab07 Apr 11, 2026 •

edited

Loading

awahab07 Apr 11, 2026 •

edited

Loading