feat(axis): add option to truncate axis tick labels by biamalveiro · Pull Request #2829 · elastic/elastic-charts

biamalveiro · 2026-05-04T14:58:21Z

Summary

Adds ability to set a maximum length for axis tick labels, and truncate in case of overflow. Truncation can be configured to happen at start, middle or end of the string.

Details

AxisStyle.tickLabel config has two new optional properties: maxLength (Pixels, or a string such as 80%, in relation to the container's width) and truncate (end, start, or middle). Formatters are wrapped with withTickLabelTruncation, so they are truncated if they overflow.

Additionally, this PR extends fitText to support truncation at start or middle of string, not only trailing ellipsis (end). This updated implementation searches for fit based on what is drawn (including the ... when text is clipped), while the previous used the length of the prefix before swapping last character with an ellipsis. This led to ~1 character differences in snapshots that used text truncation, (when width(slice(0, v)) is different from width(slice(0, v−1) + …)). Updated VRT to fix these misses.

Added a story where this behavior can be tested.

Scope / follow-ups

This is intentionally a first pass: truncation is applied at the formatter using a max length in pixels (and optional ellipsis position), not a full label-box sizing model.

An idea of having minSize / size / maxSize on axis labels for more control was discussed but needs more thought, as it goes into labelBox calculations and we need to consider rotated labels and vertical/horizontal axis. Scoped out for this change, but to be revisited later.

Issues

Related to elastic/kibana#265517

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

biamalveiro · 2026-05-05T08:43:34Z

buildkite update vrt

nickofthyme

Sorry for the delay, I wanted to really understand the logic and test it out.

I left a few things to check out and resolve before merging but nothing real major.

Really nice PR! 🚀

biamalveiro · 2026-05-11T14:25:32Z

buildkite test this

biamalveiro · 2026-05-11T15:00:38Z

buildkite update vrt

biamalveiro · 2026-05-11T17:36:45Z

buildkite update vrt

nickofthyme

I added a few more comments. I'm a little more doubtful about applying this to both axes instead of just the vertical axis, at least for this first pass to close the kibana issue. Also think it may be better to split the setting to control horizontal and vertical truncation separately.

…spec

elastic-datavis · 2026-05-15T14:33:50Z

✅ Successful Deployment (build#359) - `5bd1830`

nickofthyme

This looks great! Sorry for all the back and forth. In the end, I think it ended up in a good spot.

biamalveiro · 2026-05-19T15:42:55Z

Thanks @nickofthyme for having a thorough look at this + helping think through and improve the solution!

# [71.7.0](v71.6.1...v71.7.0) (2026-05-20) ### Features * **axis:** add option to truncate axis tick labels ([#2829](#2829)) ([e0c8e72](e0c8e72))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | minor | [`71.6.1` -> `71.7.0`](elastic/elastic-charts@v71.6.1...v71.7.0) | ### Release Notes #### [71.7.0](elastic/elastic-charts@v71.6.1...v71.7.0) (2026-05-20) Features • axis: add option to truncate axis tick labels ([#2829](elastic/elastic-charts#2829)) ([e0c8e72](elastic/elastic-charts@e0c8e72))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | minor | [`71.6.1` -> `71.7.0`](elastic/elastic-charts@v71.6.1...v71.7.0) | ### Release Notes #### [71.7.0](elastic/elastic-charts@v71.6.1...v71.7.0) (2026-05-20) Features • axis: add option to truncate axis tick labels ([elastic#2829](elastic/elastic-charts#2829)) ([e0c8e72](elastic/elastic-charts@e0c8e72))

## Summary This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | minor | [`71.6.1` -> `71.7.0`](elastic/elastic-charts@v71.6.1...v71.7.0) | ### Release Notes #### [71.7.0](elastic/elastic-charts@v71.6.1...v71.7.0) (2026-05-20) Features • axis: add option to truncate axis tick labels ([#2829](elastic/elastic-charts#2829)) ([e0c8e72](elastic/elastic-charts@e0c8e72))

biamalveiro added 4 commits May 4, 2026 14:38

feat: add tick label truncation from maxWidth

30727ea

feat: allow truncate in start, end or middle

898edca

chore: move story from bar to axes group

578fc7c

feat: add screenshot test

b1ce36e

biamalveiro force-pushed the feat/trim-bar-labels branch from f68416b to b1ce36e Compare May 5, 2026 07:52

elastic-datavis Bot and others added 3 commits May 5, 2026 09:04

test(vrt): update screenshots [skip ci]

9999a25

test: add unit tests for fitText

d208aa0

chore: update api

1a42ab9

biamalveiro added the :axis Axis related issue label May 5, 2026

biamalveiro marked this pull request as ready for review May 5, 2026 11:15

biamalveiro requested a review from a team as a code owner May 5, 2026 11:15

nickofthyme approved these changes May 7, 2026

View reviewed changes

Comment thread packages/charts/api/charts.api.md

Comment thread packages/charts/src/common/text_utils.ts Outdated

Comment thread packages/charts/src/utils/themes/theme.ts Outdated

biamalveiro mentioned this pull request May 7, 2026

[Lens][XY] Truncate long axis tick labels in horizontal bar charts elastic/kibana#268106

Merged

3 tasks

biamalveiro added 3 commits May 7, 2026 11:23

fix: export ELLIPSIS definition

c78ad3d

fix: remove ellipsis adjustment in partition

4ddbf89

feat: support relative tick label truncation limits

eb3db71

nickofthyme reviewed May 7, 2026

View reviewed changes

Comment thread packages/charts/src/renderers/canvas/primitives/text.ts Outdated

biamalveiro marked this pull request as draft May 11, 2026 13:48

biamalveiro added 2 commits May 11, 2026 14:56

feat: simplify length limit implementation

7fdaf55

fix: circular dep

647d820

biamalveiro force-pushed the feat/trim-bar-labels branch from 99aac32 to 647d820 Compare May 11, 2026 14:14

biamalveiro marked this pull request as ready for review May 11, 2026 14:21

Merge branch 'main' into feat/trim-bar-labels

3e93aa4

test(vrt): update screenshots [skip ci]

f22ab83

nickofthyme reviewed May 13, 2026

View reviewed changes

nickofthyme self-requested a review May 13, 2026 03:54

test: add tests for withAxisTickLabelTruncation

edbfcf1

biamalveiro force-pushed the feat/trim-bar-labels branch 3 times, most recently from 058c5a0 to 907e944 Compare May 13, 2026 13:50

test: split knobs in axis tick truncation story

2792327

biamalveiro force-pushed the feat/trim-bar-labels branch from 907e944 to 2792327 Compare May 13, 2026 14:24

refactor: remove tick label truncation parameters from theme to axis …

5bd1830

…spec

biamalveiro force-pushed the feat/trim-bar-labels branch from 2f05ea9 to 5bd1830 Compare May 15, 2026 14:06

nickofthyme approved these changes May 19, 2026

View reviewed changes

biamalveiro merged commit e0c8e72 into elastic:main May 19, 2026
14 checks passed

nickofthyme pushed a commit that referenced this pull request May 20, 2026

chore(release): 71.7.0 [skip ci]

118c9d6

# [71.7.0](v71.6.1...v71.7.0) (2026-05-20) ### Features * **axis:** add option to truncate axis tick labels ([#2829](#2829)) ([e0c8e72](e0c8e72))

biamalveiro mentioned this pull request May 20, 2026

Upgrade dependency @elastic/charts to v71.7.0 elastic/kibana#270248

Merged

Conversation

biamalveiro commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Scope / follow-ups

Issues

Checklist

Uh oh!

biamalveiro commented May 5, 2026

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

biamalveiro commented May 11, 2026

Uh oh!

biamalveiro commented May 11, 2026

Uh oh!

biamalveiro commented May 11, 2026

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elastic-datavis Bot commented May 15, 2026

✅ Successful Deployment (build#359) - 5bd1830

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

biamalveiro commented May 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

biamalveiro commented May 4, 2026 •

edited

Loading

✅ Successful Deployment (build#359) - `5bd1830`