feat(theme): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 by maryam-saeidi · Pull Request #2802 · elastic/elastic-charts

maryam-saeidi · 2026-03-04T12:02:25Z

Summary

Legend label truncation options now have sensible defaults in all built-in themes. legend.labelOptions.widthLimit defaults to 250px (alongside maxLines: 1), so consumers don’t need to manually set these values to get consistent legend label truncation behavior.
Metric chart titles now default to a medium (500) font weight (instead of bold).

Details

Added legend.labelOptions.widthLimit: 250 to all built-in themes (Light/Dark, Amsterdam, Legacy).
Made LegendLabelOptions.maxLines and LegendLabelOptions.widthLimit required, relying on theme defaults instead of inline component fallbacks.
Updated the API report (packages/charts/api/charts.api.md) to reflect the required fields.
Updated built-in themes to use metric.titleWeight: 500 instead of 'bold' (Related to [Lens] Remove font-weight configuration from Metric Chart style panel kibana#252834).

Issues

Closes #2801

Checklist

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

Made with Cursor

Add widthLimit: 250 to built-in themes and make legend labelOptions.maxLines/widthLimit required. Made-with: Cursor

Use medium font-weight (500) instead of 'bold' for metric titles across built-in themes. Made-with: Cursor

maryam-saeidi · 2026-03-04T13:03:06Z

buildkite update vrt

maryam-saeidi · 2026-03-04T14:56:26Z

buildkite build this

maryam-saeidi · 2026-03-04T16:00:22Z

buildkite update vrt

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

e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/array-of-values-chrome-linux.png

mariairiartef

LGTM! Left some comments

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

Remove unnecessary defaultValue comments

elastic-datavis · 2026-03-06T13:59:22Z

✅ Successful Deployment (build#99) - `98f2c39`

# [71.4.0](v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([#2646](#2646)) ([0ca3289](0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([#2807](#2807)) ([c5089f5](c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([#2774](#2774)) ([b39e24d](b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([#2783](#2783)) ([54ca7cb](54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([#2802](#2802)) ([fbb8834](fbb8834))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://github.com/elastic/elastic-charts) | dependencies | minor | [`71.3.0` -> `71.4.0`](elastic/elastic-charts@v71.3.0...v71.4.0) | ### Release Notes # [71.4.0](elastic/elastic-charts@v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([#2646](elastic/elastic-charts#2646)) ([0ca3289](elastic/elastic-charts@0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([#2807](elastic/elastic-charts#2807)) ([c5089f5](elastic/elastic-charts@c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([#2774](elastic/elastic-charts#2774)) ([b39e24d](elastic/elastic-charts@b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([#2783](elastic/elastic-charts#2783)) ([54ca7cb](elastic/elastic-charts@54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([#2802](elastic/elastic-charts#2802)) ([fbb8834](elastic/elastic-charts@fbb8834)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://github.com/elastic/elastic-charts) | dependencies | minor | [`71.3.0` -> `71.4.0`](elastic/elastic-charts@v71.3.0...v71.4.0) | ### Release Notes # [71.4.0](elastic/elastic-charts@v71.3.0...v71.4.0) (2026-03-31) ### Bug Fixes * **legend:** avoid re-rendering ([elastic#2646](elastic/elastic-charts#2646)) ([0ca3289](elastic/elastic-charts@0ca3289)) * **legend:** keep legend values visible when hiding series in list layout ([elastic#2807](elastic/elastic-charts#2807)) ([c5089f5](elastic/elastic-charts@c5089f5)) ### Features * **highlight:** Add support to configure dimmed (unhighlight) colors for Bar, Partition, Waffle and Flame charts ([elastic#2774](elastic/elastic-charts#2774)) ([b39e24d](elastic/elastic-charts@b39e24d)), closes [#ECF1F9](https://github.com/elastic/elastic-charts/issues/ECF1F9) [#384861](https://github.com/elastic/elastic-charts/issues/384861) * **metric:** Add ability to vertically align the metrics values to the middle of the chart ([elastic#2783](elastic/elastic-charts#2783)) ([54ca7cb](elastic/elastic-charts@54ca7cb)) * **theme:** set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 ([elastic#2802](elastic/elastic-charts#2802)) ([fbb8834](elastic/elastic-charts@fbb8834)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

…#254941) Closes #252834 ## Summary This PR removes the font-weight configuration in Metric charts and defaults it to **medium**. - [x] TODO: Add another option for the Metric font-weight: medium to the elastic-charts. - elastic/elastic-charts#2792 - elastic/elastic-charts#2802 |State|Screenshot| |---|---| |Before|<img width="1511" height="652" alt="image" src="https://github.com/user-attachments/assets/a82617f9-5c81-4c58-8084-a0ab333b2b16" />| |After|<img width="1509" height="786" alt="image" src="https://github.com/user-attachments/assets/ad7790dd-812a-43c0-b832-602b610d7ca5" />| ### How to test 🧪 - Create two metric chart in main: one with the font weight: Regular and another with default bold font weight - Switch to this branch and make sure that the related metric chart is loaded correctly with the **medium (500)** font weight. - Make a change in the regular font weight metric and save. Now, you should not see the font weight property in the saved object anymore. I also followed the same steps in the Cases, and it worked as expected: |State|Screenshot| |---|---| |Before|<img width="1510" height="804" alt="image" src="https://github.com/user-attachments/assets/1266d92f-8ec0-4199-86e8-c89520f15fa9" />| |After|<img width="1512" height="783" alt="image" src="https://github.com/user-attachments/assets/f1ae0989-4320-456e-a0b4-770a4a1e550e" />| ### Release Note Removed the font-weight parameter for Metric chart titles. Titles now use a consistent default font weight of Medium. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

feat(legend): default label widthLimit in themes

6bb9bf5

Add widthLimit: 250 to built-in themes and make legend labelOptions.maxLines/widthLimit required. Made-with: Cursor

maryam-saeidi changed the title ~~[Legend] Default legend.labelOptions.widthLimit in themes~~ feat(legend): set default labelOptions.widthLimit in themes Mar 4, 2026

maryam-saeidi self-assigned this Mar 4, 2026

maryam-saeidi added :legend Legend related issue :theme labels Mar 4, 2026

feat(metric): set default titleWeight to 500

e60d7bc

Use medium font-weight (500) instead of 'bold' for metric titles across built-in themes. Made-with: Cursor

test(vrt): update screenshots [skip ci]

588ca76

maryam-saeidi changed the title ~~feat(legend): set default labelOptions.widthLimit in themes~~ feat(legend): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 Mar 4, 2026

maryam-saeidi marked this pull request as ready for review March 4, 2026 14:02

Update screenshots

0495b9b

test(vrt): update screenshots [skip ci]

c237639

maryam-saeidi requested a review from a team March 5, 2026 08:31

maryam-saeidi linked an issue Mar 5, 2026 that may be closed by this pull request

[Lens] Remove font-weight configuration from Metric Chart style panel elastic/kibana#252834

Closed

mariairiartef self-requested a review March 6, 2026 09:31

mariairiartef reviewed Mar 6, 2026

View reviewed changes

packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved

mariairiartef reviewed Mar 6, 2026

View reviewed changes

packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved

mariairiartef reviewed Mar 6, 2026

View reviewed changes

e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/array-of-values-chrome-linux.png Show resolved Hide resolved

mariairiartef approved these changes Mar 6, 2026

View reviewed changes

maryam-saeidi changed the title ~~feat(legend): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500~~ feat(theme): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500 Mar 6, 2026

maryam-saeidi commented Mar 6, 2026

View reviewed changes

packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved

maryam-saeidi commented Mar 6, 2026

View reviewed changes

packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

98f2c39

Remove unnecessary defaultValue comments

maryam-saeidi enabled auto-merge (squash) March 6, 2026 13:06

maryam-saeidi merged commit fbb8834 into elastic:main Mar 6, 2026
14 checks passed

maryam-saeidi deleted the 2801-set-theme-default-value branch March 6, 2026 14:20

maryam-saeidi mentioned this pull request Mar 19, 2026

fix(legend): keep legend values visible when hiding series in list layout #2807

Merged

awahab07 mentioned this pull request Mar 26, 2026

feat(highlight): Add support to configure dimmed (unhighlight) colors for Bar and Partition charts #2774

Merged

8 tasks

maryam-saeidi mentioned this pull request Mar 31, 2026

Upgrade dependency @elastic/charts to v71.4.0 elastic/kibana#260593

Merged

maryam-saeidi mentioned this pull request Apr 2, 2026

[Lens] Remove font-weight configuration from Metric Chart style panel elastic/kibana#254941

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(theme): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500#2802

feat(theme): set default labelOptions.widthLimit in themes and update metric.titleWeight default to 500#2802
maryam-saeidi merged 6 commits intoelastic:mainfrom
maryam-saeidi:2801-set-theme-default-value

maryam-saeidi commented Mar 4, 2026 •

edited

Loading

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mariairiartef left a comment

Uh oh!

Uh oh!

Uh oh!

elastic-datavis bot commented Mar 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

maryam-saeidi commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Issues

Checklist

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

maryam-saeidi commented Mar 4, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mariairiartef left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elastic-datavis bot commented Mar 6, 2026

✅ Successful Deployment (build#99) - 98f2c39

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

maryam-saeidi commented Mar 4, 2026 •

edited

Loading

✅ Successful Deployment (build#99) - `98f2c39`