Skip to content

feat(theme): Add fontFamily property to MetricStyle#2816

Merged
awahab07 merged 9 commits into
elastic:mainfrom
awahab07:261506_Lens_Fix-primary-metric-text-clipping-for-Metric-chart---for-monospace-font
Apr 13, 2026
Merged

feat(theme): Add fontFamily property to MetricStyle#2816
awahab07 merged 9 commits into
elastic:mainfrom
awahab07:261506_Lens_Fix-primary-metric-text-clipping-for-Metric-chart---for-monospace-font

Conversation

@awahab07
Copy link
Copy Markdown
Collaborator

@awahab07 awahab07 commented Apr 8, 2026

Summary

Adds fontFamily property to MetricStyle so that consumers can override fonts for Metric chart titles. The requirement emerged when Lens in Kibana started introducing the monospaced font"Elastic UI Numeric" for all charts in Lens. Since Metric chart was not accepting fontFamily prop (which Lens applies into themes of all Lens rendered charts), text measurements in Metric chart were still using the default hardcoded fontFamily string, in contrast to the rendered titles which were adopting the Lens applied "Elastic UI Numeric" font via DOM inheritance, resulting into unexpected text clipping (see).

The story Test Cases -> Font Measurement Test first reproduces the issue same as Lens

image

then validates that the fix would work in scenario's like Lens

image

Details

This fixes the Metric fit calculation for cases where the rendered DOM inherits a different font family from its wrapper, such as Lens panels using "Elastic UI Numeric".
The Metric DOM renderer now:

  • measures titles, subtitles, and primary values with the configured font family instead of assuming the default chart font

Issues

Fixes elastic/kibana#261506
Related: elastic/elastic-charts#2811

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

@awahab07 awahab07 added :theme :metric Related to Metric chart labels Apr 8, 2026
awahab07
awahab07 commented Apr 8, 2026
View reviewed changes
Comment thread packages/charts/src/chart_types/metric/renderer/dom/titles.tsx
@awahab07 awahab07 mentioned this pull request Apr 10, 2026
Merged
@awahab07
Merge remote-tracking branch 'upstream/main' into 261506_Lens_Fix-pri…
102ffaa 
…mary-metric-text-clipping-for-Metric-chart---for-monospace-font
@awahab07
Copy link
Copy Markdown
Collaborator Author

awahab07 commented Apr 10, 2026

buildkite test this

@elastic-datavis
Copy link
Copy Markdown
Contributor

elastic-datavis Bot commented Apr 10, 2026

✅ Successful Deployment (build#240) - 102ffaa

@awahab07 awahab07 marked this pull request as ready for review April 12, 2026 00:06
@awahab07 awahab07 requested a review from a team April 12, 2026 00:06
@awahab07 awahab07 enabled auto-merge (squash) April 13, 2026 16:51
@awahab07 awahab07 merged commit 5bcaf24 into elastic:main Apr 13, 2026
14 checks passed
nickofthyme pushed a commit that referenced this pull request Apr 14, 2026
@semantic-release-bot
chore(release): 71.5.0 [skip ci]
53a4de8 
# [71.5.0](v71.4.1...v71.5.0) (2026-04-14)

### Bug Fixes

* guard process.env for browser environments without bundler polyfills ([#2810](#2810)) ([9ffd74e](9ffd74e))
* remove `produce()` from selectors ([#2813](#2813)) ([561162c](561162c))

### Features

* **theme:** Add `fontFamily` property to `BulletStyle` ([#2811](#2811)) ([a23b25c](a23b25c))
* **theme:** Add `fontFamily` property to `MetricStyle` ([#2816](#2816)) ([5bcaf24](5bcaf24))
@awahab07 awahab07 mentioned this pull request Apr 14, 2026
Merged
awahab07 added a commit to elastic/kibana that referenced this pull request Apr 15, 2026
@awahab07
Upgrade @elastic/charts to version 71.5.0. (#263134)
b1617e3 
Upgrades the `@elastic/charts` to version `71.5.0` (from `71.4.0`).


[`71.5.0`](https://github.com/elastic/elastic-charts/releases/tag/v71.5.0)
includes the following two necessary theme updates which Lens needs to
accurately render monospaced font for Metric and Gauge charts.
- elastic/elastic-charts#2811
- elastic/elastic-charts#2816

|Before v71.4.0|After v71.5.0|
|:--:|:--:|
|<img width="642" height="614" alt="image"
src="https://github.com/user-attachments/assets/3df7090d-35bd-4921-9027-35f7db1e9bca"
/>|<img width="641" height="622" alt="image"
src="https://github.com/user-attachments/assets/48010014-c76d-4301-b133-86d192f4161e"
/>|
awahab07 added a commit to awahab07/kibana that referenced this pull request Apr 17, 2026
@awahab07
Upgrade @elastic/charts to version 71.5.0. (elastic#263134)
b34e7d1 
Upgrades the `@elastic/charts` to version `71.5.0` (from `71.4.0`).

[`71.5.0`](https://github.com/elastic/elastic-charts/releases/tag/v71.5.0)
includes the following two necessary theme updates which Lens needs to
accurately render monospaced font for Metric and Gauge charts.
- elastic/elastic-charts#2811
- elastic/elastic-charts#2816

|Before v71.4.0|After v71.5.0|
|:--:|:--:|
|<img width="642" height="614" alt="image"
src="https://github.com/user-attachments/assets/3df7090d-35bd-4921-9027-35f7db1e9bca"
/>|<img width="641" height="622" alt="image"
src="https://github.com/user-attachments/assets/48010014-c76d-4301-b133-86d192f4161e"
/>|

(cherry picked from commit b1617e3)

# Conflicts:
#	src/platform/packages/private/kbn-ui-shared-deps-npm/version_dependencies.txt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@markov00 markov00 markov00 approved these changes

Assignees

No one assigned

Labels

:metric Related to Metric chart :theme

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Lens] Fix primary metric text clipping for Metric chart - for monospace font

2 participants

@awahab07 @markov00