elastic · maryam-saeidi · Mar 6, 2026 · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/...s/all.test.ts-snapshots/baselines/metric-alpha/array-of-values-chrome-linux.png b/...s/all.test.ts-snapshots/baselines/metric-alpha/array-of-values-chrome-linux.png
diff --git a/...screenshots/all.test.ts-snapshots/baselines/metric-alpha/basic-chrome-linux.png b/...screenshots/all.test.ts-snapshots/baselines/metric-alpha/basic-chrome-linux.png
diff --git a/...hots/all.test.ts-snapshots/baselines/metric-alpha/extra-badges-chrome-linux.png b/...hots/all.test.ts-snapshots/baselines/metric-alpha/extra-badges-chrome-linux.png
diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png
diff --git a/...l.test.ts-snapshots/baselines/metric-alpha/trend-multiple-data-chrome-linux.png b/...l.test.ts-snapshots/baselines/metric-alpha/trend-multiple-data-chrome-linux.png
diff --git a/...all.test.ts-snapshots/baselines/test-cases/metric-trend-length-chrome-linux.png b/...all.test.ts-snapshots/baselines/test-cases/metric-trend-length-chrome-linux.png
diff --git a/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...izing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png b/...izing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png
diff --git a/...a-badge-props/extra-badge-with-big-breakpoints-with-trend-both-chrome-linux.png b/...a-badge-props/extra-badge-with-big-breakpoints-with-trend-both-chrome-linux.png
diff --git a/...a-badge-props/extra-badge-with-big-breakpoints-with-trend-icon-chrome-linux.png b/...a-badge-props/extra-badge-with-big-breakpoints-with-trend-icon-chrome-linux.png
diff --git a/...-badge-props/extra-badge-with-big-breakpoints-with-trend-value-chrome-linux.png b/...-badge-props/extra-badge-with-big-breakpoints-with-trend-value-chrome-linux.png
diff --git a/...badge-props/extra-badge-with-small-breakpoints-with-trend-both-chrome-linux.png b/...badge-props/extra-badge-with-small-breakpoints-with-trend-both-chrome-linux.png
diff --git a/...badge-props/extra-badge-with-small-breakpoints-with-trend-icon-chrome-linux.png b/...badge-props/extra-badge-with-small-breakpoints-with-trend-icon-chrome-linux.png
diff --git a/...adge-props/extra-badge-with-small-breakpoints-with-trend-value-chrome-linux.png b/...adge-props/extra-badge-with-small-breakpoints-with-trend-value-chrome-linux.png
diff --git a/...ar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...ar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...ar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...ar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...r-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...r-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...r-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...r-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...ic/metric-bar-type/should-render-with-blended-background-color-chrome-linux.png b/...ic/metric-bar-type/should-render-with-blended-background-color-chrome-linux.png
diff --git a/...ne-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...ne-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...ne-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...ne-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...e-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...e-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...e-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...e-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...c/metric-none-type/should-render-with-blended-background-color-chrome-linux.png b/...c/metric-none-type/should-render-with-blended-background-color-chrome-linux.png
diff --git a/...nd-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...nd-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...nd-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...nd-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...d-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...d-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...d-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...d-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/.../metric-trend-type/should-render-with-blended-background-color-chrome-linux.png b/.../metric-trend-type/should-render-with-blended-background-color-chrome-linux.png
diff --git a/...test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png b/...test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png
diff --git a/...hots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png b/...hots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png
diff --git a/...t.ts-snapshots/metric/should-render-metric-value-fit-font-size-chrome-linux.png b/...t.ts-snapshots/metric/should-render-metric-value-fit-font-size-chrome-linux.png
diff --git a/...stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png b/...stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png
diff --git a/...ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png b/...ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png
diff --git a/...pshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png b/...pshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png
diff --git a/.../metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png b/.../metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png
diff --git a/...ies.test.ts-snapshots/metric/small-size-with-default-font-size-chrome-linux.png b/...ies.test.ts-snapshots/metric/small-size-with-default-font-size-chrome-linux.png
diff --git a/...stories.test.ts-snapshots/metric/small-size-with-fit-font-size-chrome-linux.png b/...stories.test.ts-snapshots/metric/small-size-with-fit-font-size-chrome-linux.png
diff --git a/...ories.test.ts-snapshots/metric/small-size-with-fixed-font-size-chrome-linux.png b/...ories.test.ts-snapshots/metric/small-size-with-fixed-font-size-chrome-linux.png
diff --git a/.../metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png b/.../metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png
diff --git a/...ic_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png b/...ic_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1848,8 +1848,8 @@ export type LegendItemValue = {
 
 // @public (undocumented)
 export interface LegendLabelOptions {
-    maxLines?: number;
-    widthLimit?: number;
+    maxLines: number;
+    widthLimit: number;
 }
 
 // @public (undocumented)

diff --git a/packages/charts/src/chart_types/xy_chart/utils/dimensions.test.ts b/packages/charts/src/chart_types/xy_chart/utils/dimensions.test.ts
@@ -77,6 +77,7 @@ describe('Computed chart dimensions', () => {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   };
   const defaultTheme = LIGHT_THEME;

diff --git a/packages/charts/src/components/legend/label.tsx b/packages/charts/src/components/legend/label.tsx
@@ -92,7 +92,7 @@ export function Label({
     [onToggle],
   );
 
-  const title = options.maxLines ?? 1 > 0 ? label : ''; // full text already visible
+  const title = Math.abs(options.maxLines) > 0 ? label : ''; // full text already visible
 
   return isToggleable ? (
     // This div is required to allow multiline text truncation, all ARIA requirements are still met
@@ -135,8 +135,8 @@ function getSharedProps(
   isToggleable?: boolean,
   truncationMode: TruncationMode = 'line',
 ) {
-  const maxLines = Math.abs(options.maxLines ?? 1);
-  const widthLimit = Math.abs(options.widthLimit ?? 250);
+  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': maxLines === 1,

diff --git a/packages/charts/src/state/selectors/get_legend_size.ts b/packages/charts/src/state/selectors/get_legend_size.ts
@@ -121,7 +121,7 @@ export const getLegendSizeSelector = createCustomCachedSelector(
             : bbox.height * 2 + 24;
     } else {
       // This section is related to the list layout
-      const widthLimit = Math.abs(theme.legend.labelOptions.widthLimit ?? 250);
+      const widthLimit = Math.abs(theme.legend.labelOptions.widthLimit);
       const { isSingleLine, isMoreThanTwoLines } = withTextMeasure((textMeasure) =>
         computeHorizontalLegendRowCount({
           items,

diff --git a/packages/charts/src/utils/themes/amsterdam_dark_theme.ts b/packages/charts/src/utils/themes/amsterdam_dark_theme.ts
@@ -224,6 +224,7 @@ export const AMSTERDAM_DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -434,7 +435,7 @@ export const AMSTERDAM_DARK_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: {
     textColor: '#E0E5EE',

diff --git a/packages/charts/src/utils/themes/amsterdam_light_theme.ts b/packages/charts/src/utils/themes/amsterdam_light_theme.ts
@@ -225,6 +225,7 @@ export const AMSTERDAM_LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -434,7 +435,7 @@ export const AMSTERDAM_LIGHT_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: {
     textColor: '#343741',

diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
@@ -247,6 +247,7 @@ export const DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -457,7 +458,7 @@ export const DARK_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: DARK_THEME_BULLET_STYLE,
   tooltip: {

diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts
@@ -229,6 +229,7 @@ export const LEGACY_DARK_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -438,7 +439,7 @@ export const LEGACY_DARK_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: DARK_THEME_BULLET_STYLE,
   tooltip: {

diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts
@@ -229,6 +229,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -437,7 +438,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: LIGHT_THEME_BULLET_STYLE,
   tooltip: {

diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
@@ -247,6 +247,7 @@ export const LIGHT_THEME: Theme = {
     margin: 0,
     labelOptions: {
       maxLines: 1,
+      widthLimit: 250,
     },
   },
   crosshair: {
@@ -456,7 +457,7 @@ export const LIGHT_THEME: Theme = {
     emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
-    titleWeight: 'bold',
+    titleWeight: 500,
   },
   bulletGraph: LIGHT_THEME_BULLET_STYLE,
   tooltip: {

diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
@@ -400,19 +400,15 @@ export interface LegendLabelOptions {
    * Sets maxlines allowable before truncating
    *
    * Setting value to `0` will _never_ truncate the text
-   *
-   * @defaultValue 1
    */
-  maxLines?: number;
+  maxLines: number;
   /**
    * Sets widthLimit allowable before truncating (unit: px)
    * Only applicable if the list layout is chosen for the top and bottom positions
    *
    * Setting value to `0` will _never_ truncate the text
-   *
-   * @defaultValue 250
    */
-  widthLimit?: number;
+  widthLimit: number;
 }
 
 /** @public */

diff --git a/storybook/stories/legend/11_legend_actions.story.tsx b/storybook/stories/legend/11_legend_actions.story.tsx
@@ -24,6 +24,7 @@ const getLabelOptionKnobs = (): LegendLabelOptions => {
 
   return {
     maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+    widthLimit: 250,
   };
 };
 

diff --git a/storybook/stories/legend/17_tabular_data.story.tsx b/storybook/stories/legend/17_tabular_data.story.tsx
@@ -25,6 +25,7 @@ const getLabelOptionKnobs = (): LegendLabelOptions => {
 
   return {
     maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+    widthLimit: 250,
   };
 };
 

diff --git a/storybook/stories/legend/2_legend_layout.story.tsx b/storybook/stories/legend/2_legend_layout.story.tsx
@@ -24,8 +24,10 @@ const getLabelOptionKnobs = (isLineLimit: boolean): LegendLabelOptions => {
   return isLineLimit
     ? {
         maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+        widthLimit: 250,
       }
     : {
+        maxLines: 1,
         widthLimit: number('width limit', 250, { min: 0, step: 1 }, group),
       };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ const getLabelOptionKnobs = (): LegendLabelOptions => { @@
       return {
         maxLines: number('max label lines', 1, { min: 0, step: 1 }, group),
+        widthLimit: 250,
       };
     };
@@ Expand Down @@