feat(metric): Add ability to vertically align the metrics values to the middle of the chart by awahab07 · Pull Request #2783 · elastic/elastic-charts

awahab07 · 2026-01-26T18:05:14Z

Summary

The valuePosition prop in the MetricStyle theme now supports a new 'middle' value, allowing the primary metric value to be vertically centered within the chart area. When using valuePosition: 'middle', the title and subtitle remain at the top, while the primary metric value is centered with the secondary metric (extra) displayed directly below it.

234956-Metric-chart-primary-value-vertical-middle-alignment.mov

Details

Added 'middle' to the valuePosition union type in MetricStyle interface ('top' | 'middle' | 'bottom')
The following stories could be used to test the change:
- Metric (@Alpha) → Basic
- Metric (@Alpha) → Grid
- Metric (@Alpha) → Body Content
- Metric (@Alpha) → Layout

Update 01

see

Issues

Implement the underlying functionality required by elastic/kibana#234956.

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 · 2026-01-26T18:06:14Z

buildkite test this

awahab07 · 2026-01-27T09:57:02Z

buildkite update vrt

…ical position is in the middle.

awahab07 · 2026-01-27T15:04:58Z

buildkite update vrt

awahab07 · 2026-01-28T00:00:35Z

buildkite update vrt

delanni · 2026-02-18T19:50:21Z

buildkite build this

gvnmagni · 2026-02-27T10:10:14Z

Thanks @awahab07 , can I ask you to fix one detail? The Secondary Metric should always be anchored to the bottom, as the Title is always anchored to the top, and then it is Primary Metric that basically forced its position around the component

This image show an extreme version of this concept (font sizes are wrong, it is purely to show the logic):

…Allow-Middle-Center-Alignment-for-primary-and-secondary-metrics

awahab07 · 2026-03-03T11:33:04Z

Update 01

The extra block (secondary metric) will always be anchored now to the bottom (unless when the primary metric is positioned to the bottom in which case secondary metric will appear above it).

packages/charts/src/chart_types/metric/renderer/dom/_text.scss

packages/charts/api/charts.api.md

gvnmagni

Looks great! 🚀

packages/charts/src/chart_types/metric/renderer/dom/_text.scss

elastic-datavis · 2026-03-04T23:17:09Z

✅ Successful Deployment (build#89) - `4a3051b`

mariairiartef

LGTM! Thanks for addressing the comments 💖

markov00

Tested locally, looks good to me!

# [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>

- Adds a **Middle** option to Lens Metric → Style → Primary metric → Position (**Top | Middle | Bottom**). - Enables vertically centered primary metric positioning using elastic-charts support from [elastic/elastic-charts#2783](elastic/elastic-charts#2783).

…c#260902) - Adds a **Middle** option to Lens Metric → Style → Primary metric → Position (**Top | Middle | Bottom**). - Enables vertically centered primary metric positioning using elastic-charts support from [elastic/elastic-charts#2783](elastic/elastic-charts#2783).

Add 'middle' for Metric chart's valuePosition configuration.

bff2954

awahab07 added enhancement New feature or request :Lens Kibana Lens related issue :metric Related to Metric chart labels Jan 26, 2026

elastic-datavis bot and others added 3 commits January 27, 2026 10:23

test(vrt): update screenshots [skip ci]

52ee249

Update API docs.

f0a6dc6

Bring back padding-top: 5px for extraBlock. But remove it when vert…

0402952

…ical position is in the middle.

API docs update.

10d90ad

test(vrt): update screenshots [skip ci]

059ea60

awahab07 marked this pull request as ready for review January 28, 2026 10:47

awahab07 enabled auto-merge (squash) February 13, 2026 10:20

awahab07 linked an issue Feb 19, 2026 that may be closed by this pull request

[Lens][Metric] Allow Middle Center Alignment for primary and secondary metrics elastic/kibana#234956

Closed

markov00 requested review from gvnmagni and markov00 February 26, 2026 11:31

awahab07 added 2 commits March 3, 2026 12:27

Keep secondary metric anchored to the bottom.

63c9aaa

Merge remote-tracking branch 'upstream/main' into 234956_Lens_Metric_…

ba740c5

…Allow-Middle-Center-Alignment-for-primary-and-secondary-metrics

mariairiartef reviewed Mar 4, 2026

View reviewed changes

packages/charts/src/chart_types/metric/renderer/dom/_text.scss Show resolved Hide resolved

mariairiartef reviewed Mar 4, 2026

View reviewed changes

packages/charts/api/charts.api.md Show resolved Hide resolved

gvnmagni approved these changes Mar 4, 2026

View reviewed changes

mariairiartef reviewed Mar 4, 2026

View reviewed changes

packages/charts/src/chart_types/metric/renderer/dom/_text.scss Show resolved Hide resolved

awahab07 and others added 3 commits March 4, 2026 22:12

Account for varied extra block's paddingTop.

41466ba

Add metric chart snapshot teest with valuePosition: 'middle'.

03b7be4

test(vrt): update screenshots [skip ci]

4a3051b

awahab07 requested a review from mariairiartef March 4, 2026 23:57

mariairiartef approved these changes Mar 5, 2026

View reviewed changes

markov00 approved these changes Mar 9, 2026

View reviewed changes

awahab07 merged commit 54ca7cb into elastic:main Mar 9, 2026
14 checks passed

maryam-saeidi mentioned this pull request Mar 31, 2026

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

Merged

awahab07 mentioned this pull request Apr 2, 2026

[Lens] Add Primary metric position: 'middle' for Metric chart elastic/kibana#260902

Merged

Conversation

awahab07 commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Update 01

Issues

Checklist

Uh oh!

awahab07 commented Jan 26, 2026

Uh oh!

awahab07 commented Jan 27, 2026

Uh oh!

awahab07 commented Jan 27, 2026

Uh oh!

awahab07 commented Jan 28, 2026

Uh oh!

delanni commented Feb 18, 2026

Uh oh!

gvnmagni commented Feb 27, 2026

Uh oh!

awahab07 commented Mar 3, 2026

Update 01

Uh oh!

Uh oh!

Uh oh!

gvnmagni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elastic-datavis bot commented Mar 4, 2026

✅ Successful Deployment (build#89) - 4a3051b

Uh oh!

mariairiartef left a comment

Choose a reason for hiding this comment

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

awahab07 commented Jan 26, 2026 •

edited

Loading

✅ Successful Deployment (build#89) - `4a3051b`