elastic · awahab07 · Jan 18, 2026 · Jan 18, 2026 · Jan 18, 2026 · Jan 19, 2026
@@ -317,7 +317,7 @@ test.describe('Legend stories', () => {
       (position) => {
         const isVertical = position === 'left' || position === 'right';
         if (isVertical) {
-          test('should limit width to min of 30% of computed width', async ({ page }) => {
+          test('should respect very small legend size', async ({ page }) => {
             await common.expectChartAtUrlToMatchScreenshot(page)(getUrl(position, 1));
           });
         }
@@ -348,7 +348,21 @@ test.describe('Legend stories', () => {
     );
   });
 
-  test.describe('Legend tabular data', () => {
+  test.describe('Label truncation', () => {
+    test('should correctly render middle truncation in layout story', async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/legend--layout&knob-Legend position=top&knob-Legend Layout=list&knob-truncationPosition_Label options=middle',
+      );
+    });
+
+    test('should correctly render middle truncation with floating legend and multiline', async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/legend--label-truncation&knob-Inside chart (floating)_Legend options=true&knob-Horizontal alignment_Legend options=left&knob-maxLines_Label options=2&knob-Hide short labels_Data=true&knob-enable legend size_Legend options=true&knob-legend size_Legend options=600',
+      );
+    });
+  });
+
+  http: test.describe('Legend tabular data', () => {
     const disableActionOnHover = '&knob-Show legend action on hover_Legend=false';
 
     const datasetKnob = (p1: string, p2: string) => `&globals=&knob-Dataset_Legend=${p1}&knob-dataset=${p2}`;

@@ -1851,9 +1851,13 @@ export type LegendItemValue = {
 // @public (undocumented)
 export interface LegendLabelOptions {
     maxLines: number;
+    truncationPosition: LegendLabelTruncationPosition;
     widthLimit: number;
 }
 
+// @public (undocumented)
+export type LegendLabelTruncationPosition = 'end' | 'middle';
+
 // @public (undocumented)
 export const LegendLayout: Readonly<{
     List: "list";

@@ -78,6 +78,7 @@ describe('Computed chart dimensions', () => {
     labelOptions: {
       maxLines: 1,
       widthLimit: 250,
+      truncationPosition: 'end',
     },
   };
   const defaultTheme = LIGHT_THEME;

@@ -8,6 +8,13 @@
   min-width: 1px;
 }
 
+@mixin resetWrapText {
+  overflow-wrap: initial;
+  word-wrap: initial;
+  word-break: initial;
+  hyphens: initial;
+}
+
 @mixin lineClamp($maxLines) {
   text-overflow: ellipsis;
   display: -webkit-box;

@@ -110,7 +110,13 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
     @include wrapText;
 
     &--singleline {
+      @include resetWrapText;
       @include euiTextTruncate;
+
+      // When using middle truncation, JS handles the ellipsis. `clip` will disable euiTextTruncate
+      &--middle {
+        text-overflow: clip;
+      }
     }
 
     // div to prevent changing to button
@@ -120,6 +126,13 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
       -webkit-line-clamp: 2; // number of lines to show, overridden in element styles
     }
 
+    // When using middle truncation, JS handles the ellipsis so disable CSS line-clamp truncation
+    &--multiline--middle:is(div) {
+      -webkit-line-clamp: none; // Disable CSS truncation, JS handles it
+      line-break: anywhere; // Allow breaking at any point for accurate text fitting
+      word-break: break-all; // Fallback for older browsers
+    }
+
     &--clickable:hover {
       cursor: pointer;
       text-decoration: underline;

@@ -10,11 +10,11 @@ import classNames from 'classnames';
 import type { KeyboardEventHandler, MouseEventHandler } from 'react';
 import React, { useCallback } from 'react';
 
+import type { TruncationMode } from './types';
+import { useMiddleTruncatedLabel } from './use_truncated_label';
 import { isRTLString } from '../../utils/common';
 import type { LegendLabelOptions } from '../../utils/themes/theme';
 
-type TruncationMode = 'line' | 'px';
-
 interface LabelProps {
   label: string;
   isSeriesHidden?: boolean;
@@ -79,7 +79,17 @@ export function Label({
   totalSeriesCount,
   truncationMode,
 }: LabelProps) {
-  const { className, dir, clampStyles } = getSharedProps(label, options, !!onToggle, truncationMode);
+  const shouldTruncateMiddle = options.truncationPosition === 'middle' && options.maxLines > 0;
+  const { labelRef, truncatedLabel, isComputed } = useMiddleTruncatedLabel({
+    label,
+    maxLines: options.maxLines,
+    shouldTruncateMiddle,
+    truncationMode,
+  });
+
+  // Only apply middle truncation CSS classes when JS computation is complete
+  const useMiddleClasses = shouldTruncateMiddle && isComputed;
+  const { className, dir, clampStyles } = getSharedProps(label, options, !!onToggle, truncationMode, useMiddleClasses);
 
   const onClick: MouseEventHandler = useCallback(
     ({ metaKey, ctrlKey }) => onToggle?.(isAppleDevice ? metaKey : ctrlKey),
@@ -98,6 +108,7 @@ export function Label({
     // This div is required to allow multiline text truncation, all ARIA requirements are still met
     // https://stackoverflow.com/questions/68673034/webkit-line-clamp-does-not-apply-to-buttons
     <div
+      ref={labelRef}
       role="button"
       tabIndex={0}
       dir={dir}
@@ -110,21 +121,46 @@ export function Label({
       aria-label={`${label}; ${getInteractivityAriaLabel(!isSeriesHidden, hiddenSeriesCount, totalSeriesCount)}`}
       data-testid="echLegendItemLabel"
     >
-      {label}
+      {truncatedLabel}
     </div>
   ) : (
-    <div dir={dir} className={className} title={label} style={clampStyles} data-testid="echLegendItemLabel">
-      {label}
+    <div
+      ref={labelRef}
+      dir={dir}
+      className={className}
+      title={label}
+      style={clampStyles}
+      data-testid="echLegendItemLabel"
+    >
+      {truncatedLabel}
     </div>
   );
 }
 
 /** @internal */
 export function NonInteractiveLabel({ label, options }: { label: string; options: LegendLabelOptions }) {
-  const { className, dir, clampStyles } = getSharedProps(label, options);
+  const shouldTruncateMiddle = options.truncationPosition === 'middle' && options.maxLines > 0;
+  const { labelRef, truncatedLabel, isComputed } = useMiddleTruncatedLabel({
+    label,
+    maxLines: options.maxLines,
+    shouldTruncateMiddle,
+    truncationMode: 'line',
+  });
+
+  // Only apply middle truncation CSS classes when JS computation is complete
+  const useMiddleClasses = shouldTruncateMiddle && isComputed;
+  const { className, dir, clampStyles } = getSharedProps(label, options, false, undefined, useMiddleClasses);
+
   return (
-    <div dir={dir} className={className} title={label} style={clampStyles} data-testid="echLegendItemLabel">
-      {label}
+    <div
+      ref={labelRef}
+      dir={dir}
+      className={className}
+      title={label}
+      style={clampStyles}
+      data-testid="echLegendItemLabel"
+    >
+      {truncatedLabel}
     </div>
   );
 }
@@ -134,13 +170,16 @@ function getSharedProps(
   options: LegendLabelOptions,
   isToggleable?: boolean,
   truncationMode: TruncationMode = 'line',
+  useMiddleClasses?: boolean,
 ) {
   const maxLines = Math.abs(options.maxLines);
   const widthLimit = Math.abs(options.widthLimit);
   const className = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(isToggleable),
     'echLegendItem__label--singleline': truncationMode === 'px' || maxLines === 1,
+    'echLegendItem__label--singleline--middle': (truncationMode === 'px' || maxLines === 1) && useMiddleClasses,
     'echLegendItem__label--multiline': maxLines > 1 && truncationMode === 'line',
+    'echLegendItem__label--multiline--middle': maxLines > 1 && truncationMode === 'line' && useMiddleClasses,
   });
 
   const dir = isRTLString(label) ? 'rtl' : 'ltr'; // forced for individual labels in case mixed charset

@@ -109,7 +109,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
   }
 
   const positionConfig = getLegendPositionConfig(config.legendPosition);
-  const containerStyle = getLegendStyle(positionConfig, size, legend.margin);
+  const containerStyle = getLegendStyle(positionConfig, size, legend.margin, Number.isFinite(config.legendSize));
   const listStyle = getLegendListStyle(positionConfig, chartMargins, legend, items.length);
   const isMostlyRTL = hasMostlyRTLItems(items.map(({ label }) => label));
 

@@ -38,6 +38,8 @@ export function legendPositionStyle(
       top: vAlign === Top ? chart.top : undefined,
       bottom: vAlign === Bottom ? container.height - chart.top - chart.height : undefined,
       height: legendSize.height >= chart.height ? chart.height : undefined,
+      maxWidth: chart.width - 2 * INSIDE_PADDING,
+      overflow: 'hidden',
     };
   }
 

@@ -59,7 +59,7 @@ export function getLegendListStyle(
     paddingTop,
     paddingBottom,
     ...(floating && {
-      gridTemplateColumns: `repeat(${clamp(floatingColumns ?? 1, 1, totalItems)}, auto)`,
+      gridTemplateColumns: `repeat(${clamp(floatingColumns ?? 1, 1, totalItems)}, minmax(0, auto))`,
     }),
   };
 }
@@ -68,12 +68,17 @@ export function getLegendListStyle(
  * Get the legend global style
  * @internal
  */
-export function getLegendStyle({ direction, floating }: LegendPositionConfig, size: Size, margin: number): LegendStyle {
+export function getLegendStyle(
+  { direction, floating }: LegendPositionConfig,
+  size: Size,
+  margin: number,
+  hasConfiguredWidth?: boolean,
+): LegendStyle {
   if (direction === LayoutDirection.Vertical) {
     const width = `${size.width}px`;
     return {
-      width: floating ? undefined : width,
-      maxWidth: floating ? undefined : width,
+      width: floating && !hasConfiguredWidth ? undefined : width,
+      maxWidth: floating ? '100%' : width,
       marginLeft: margin,
       marginRight: margin,
     };

@@ -23,6 +23,9 @@ import type {
 import type { LegendPath, onToggleDeselectSeriesAction } from '../../state/actions/legend';
 import type { LegendLabelOptions } from '../../utils/themes/theme';
 
+/** @internal */
+export type TruncationMode = 'line' | 'px';
+
 /** @internal */
 export interface SharedLegendItemProps {
   flatLegend: boolean;