feat(legend): Add option to truncate legend labels in the middle

packages/charts/api/charts.api.md

@@ -1849,8 +1849,12 @@ export type LegendItemValue = {
 // @public (undocumented)
 export interface LegendLabelOptions {
     maxLines: number;
+    truncationPosition: LegendLabelTruncationPosition;
 }
 
+// @public (undocumented)
+export type LegendLabelTruncationPosition = 'end' | 'middle';
+
 // @public
 export type LegendPath = LegendPathElement[];
 

packages/charts/src/components/legend/_legend_item.scss

@@ -88,6 +88,11 @@ $legendItemHeight: #{$euiFontSizeXS * $euiLineHeight};
 
     &--singleline {
       @include euiTextTruncate;
+
+      // When using middle truncation, JS handles the ellipsis: `clip` will disable euiTextTruncate
+      &--middle {
+        text-overflow: clip;
+      }
     }
 
     // div to prevent changing to button
@@ -97,6 +102,11 @@ $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 line-clamp
+    &--multiline--middle:is(div) {
+      -webkit-line-clamp: unset;
+    }
+
     &--clickable:hover {
       cursor: pointer;
       text-decoration: underline;

packages/charts/src/components/legend/label.tsx

@@ -7,9 +7,10 @@
  */
 
 import classNames from 'classnames';
-import type { KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { KeyboardEventHandler, MouseEventHandler, CSSProperties } from 'react';
 import React, { useCallback } from 'react';
 
+import { useMiddleTruncatedLabel } from './use_truncated_label';
 import { isRTLString } from '../../utils/common';
 import type { LegendLabelOptions } from '../../utils/themes/theme';
 
@@ -75,6 +76,13 @@ export function Label({
   hiddenSeriesCount,
   totalSeriesCount,
 }: LabelProps) {
+  const shouldTruncateMiddle = options.truncationPosition === 'middle' && options.maxLines > 0;
+  const { labelRef, truncatedLabel } = useMiddleTruncatedLabel({
+    label,
+    maxLines: options.maxLines,
+    shouldTruncate: shouldTruncateMiddle,
+  });
+
   const { className, dir, clampStyles } = getSharedProps(label, options, !!onToggle);
 
   const onClick: MouseEventHandler = useCallback(
@@ -94,6 +102,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}
@@ -106,35 +115,61 @@ 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 shouldTruncateMiddle = options.truncationPosition === 'middle' && options.maxLines > 0;
+  const { labelRef, truncatedLabel } = useMiddleTruncatedLabel({
+    label,
+    maxLines: options.maxLines,
+    shouldTruncate: shouldTruncateMiddle,
+  });
+
   const { className, dir, clampStyles } = getSharedProps(label, options);
+
   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>
   );
 }
 
 function getSharedProps(label: string, options: LegendLabelOptions, isToggleable?: boolean) {
   const maxLines = Math.abs(options.maxLines);
+  const shouldTruncateMiddle = options.truncationPosition === 'middle' && maxLines > 0;
+
   const className = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(isToggleable),
     'echLegendItem__label--singleline': maxLines === 1,
+    'echLegendItem__label--singleline--middle': maxLines === 1 && shouldTruncateMiddle,
     'echLegendItem__label--multiline': maxLines > 1,
+    'echLegendItem__label--multiline--middle': maxLines > 1 && shouldTruncateMiddle,
   });
 
   const dir = isRTLString(label) ? 'rtl' : 'ltr'; // forced for individual labels in case mixed charset
-  const clampStyles = maxLines > 1 ? { WebkitLineClamp: maxLines } : {};
+  const clampStyles: CSSProperties = maxLines > 1 ? { WebkitLineClamp: maxLines } : {};
 
   return { className, dir, clampStyles };
 }

packages/charts/src/components/legend/use_truncated_label.ts

@@ -0,0 +1,154 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+import type { Font } from '../../common/text_utils';
+import { withTextMeasure } from '../../utils/bbox/canvas_text_bbox_calculator';
+
+const ELLIPSIS = '…';
+
+interface UseMiddleTruncatedLabelProps {
+  label: string;
+  maxLines: number;
+  /**
+   * When true, applies middle truncation via JS.
+   * When false, returns the original label (CSS will handle end truncation).
+   */
+  shouldTruncate: boolean;
+}
+
+interface UseMiddleTruncatedLabelResult {
+  /** Ref to attach to the label element. Undefined when truncation is disabled. */
+  labelRef: React.RefObject<HTMLDivElement> | undefined;
+  /** The truncated label - middle (JS) or end (CSS) truncated based on shouldTruncate */
+  truncatedLabel: string;
+}
+
+/**
+ * Extracts font properties from computed styles to create a Font object
+ * compatible with the TextMeasure utilities.
+ */
+function getFontFromComputedStyle(computedStyle: CSSStyleDeclaration): {
+  font: Omit<Font, 'textColor'>;
+  fontSize: number;
+} {
+  const fontSize = parseFloat(computedStyle.fontSize) || 12;
+  const fontWeight = computedStyle.fontWeight as Font['fontWeight'];
+
+  const font: Omit<Font, 'textColor'> = {
+    fontStyle: (computedStyle.fontStyle || 'normal') as Font['fontStyle'],
+    fontVariant: (computedStyle.fontVariant || 'normal') as Font['fontVariant'],
+    fontWeight: fontWeight || 'normal',
+    fontFamily: computedStyle.fontFamily || 'sans-serif',
+  };
+
+  return { font, fontSize };
+}
+
+/**
+ * Simple middle truncation based on character count.
+ * Splits the label to show beginning and end with ellipsis in the middle.
+ */
+function truncateMiddle(label: string, maxChars: number): string {
+  if (label.length <= maxChars) return label;
+  if (maxChars < 2) return ELLIPSIS;
+
+  // Reserve 1 char for ellipsis
+  const availableChars = maxChars - 1;
+  const startChars = Math.ceil(availableChars / 2);
+  const endChars = Math.floor(availableChars / 2);
+
+  return `${label.slice(0, startChars)}${ELLIPSIS}${label.slice(-endChars)}`;
+}
+
+/**
+ * Hook to compute middle-truncated label text based on container width.
+ * Uses average character width estimation for a simple and efficient approach (O(1) complexity).
+ *
+ * Middle truncation preserves both the beginning and end of the label text.
+ *
+ * @internal
+ */
+export function useMiddleTruncatedLabel({
+  label,
+  maxLines,
+  shouldTruncate,
+}: UseMiddleTruncatedLabelProps): UseMiddleTruncatedLabelResult {
+  const labelRef = useRef<HTMLDivElement>(null);
+  const [truncatedLabel, setTruncatedLabel] = useState(label);
+
+  const computeTruncatedLabel = useCallback(() => {
+    if (!shouldTruncate || maxLines === 0) {
+      setTruncatedLabel(label);
+      return;
+    }
+
+    const element = labelRef.current;
+    if (!element) {
+      setTruncatedLabel(label);
+      return;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    const { font, fontSize } = getFontFromComputedStyle(computedStyle);
+    const containerWidth = element.clientWidth;
+
+    if (containerWidth <= 0) {
+      setTruncatedLabel(label);
+      return;
+    }
+
+    const result = withTextMeasure((measure) => {
+      const fullTextWidth = measure(label, font, fontSize).width;
+
+      // If text fits, no truncation needed
+      if (fullTextWidth <= containerWidth * maxLines) {
+        return label;
+      }
+
+      // Use average character width estimation - simple and loop-free
+      const avgCharWidth = measure('x', font, fontSize).width;
+      const charsPerLine = Math.floor(containerWidth / avgCharWidth);
+      // Apply 4% safety margin to account for browser rendering differences (e.g., Firefox)
+      const totalChars = Math.floor(charsPerLine * maxLines * 0.96);
+
+      return truncateMiddle(label, totalChars);
+    });
+
+    setTruncatedLabel(result);
+  }, [label, maxLines, shouldTruncate]);
+
+  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,
+  };
+}

packages/charts/src/utils/themes/amsterdam_dark_theme.ts

@@ -224,6 +224,7 @@ export const AMSTERDAM_DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/amsterdam_light_theme.ts

@@ -225,6 +225,7 @@ export const AMSTERDAM_LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/dark_theme.ts

@@ -247,6 +247,7 @@ export const DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/legacy_dark_theme.ts

@@ -229,6 +229,7 @@ export const LEGACY_DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/legacy_light_theme.ts

@@ -229,6 +229,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/light_theme.ts

@@ -247,6 +247,7 @@ export const LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      truncationPosition: 'middle',
     },
   },
   crosshair: {

packages/charts/src/utils/themes/theme.ts

@@ -393,6 +393,9 @@ export interface BackgroundStyle {
   fallbackColor: Color;
 }
 
+/** @public */
+export type LegendLabelTruncationPosition = 'end' | 'middle';
+
 /** @public */
 export interface LegendLabelOptions {
   /**
@@ -403,6 +406,15 @@ export interface LegendLabelOptions {
    * @defaultValue 1
    */
   maxLines: number;
+  /**
+   * Position where text is truncated when it overflows.
+   *
+   * - `'middle'`: Truncates in the middle, preserving start and end (e.g., `enterprise-au…ion-service`)
+   * - `'end'`: Traditional truncation at the end (e.g., `enterprise-authentication-an…`)
+   *
+   * @defaultValue 'middle'
+   */
+  truncationPosition: LegendLabelTruncationPosition;
 }
 
 /** @public */

storybook/stories/legend/11_legend_actions.story.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { boolean, number } from '@storybook/addon-knobs';
+import { boolean, number, select } from '@storybook/addon-knobs';
 import React from 'react';
 
 import type { LegendLabelOptions } from '@elastic/charts';
@@ -24,6 +24,15 @@ const getLabelOptionKnobs = (): LegendLabelOptions => {
 
   return {
     maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+    truncationPosition: select(
+      'truncationPosition',
+      {
+        middle: 'middle',
+        end: 'end',
+      },
+      'middle',
+      group,
+    ),
   };
 };