amokrunnr opened a new issue, #21607:
URL: https://github.com/apache/echarts/issues/21607
### What problem does this feature solve?
Currently, ECharts provides `width` and `overflow` properties (like
`truncate` or `break`) for labels in `markPoint`, `markLine`, and other
components. However, there is no native way to force text to fit a specific
container width by **stretching or narrowing the glyphs themselves**
(horizontal scaling).
In many UI designs—specifically when using `markPoint` with custom symbols
like pins or boxes—we have a fixed-width area for text.
1. **Truncation** (`truncate`) hides important information.
2. **Wrapping** (`break`) often breaks the visual layout or overflows the
symbol vertically.
3. **Font-size reduction** is a common workaround, but it requires manual
calculation of string lengths and doesn't guarantee a "flush" look on both
sides.
I am looking for a feature similar to the SVG attribute `textLength` with
`lengthAdjust="spacingAndGlyphs"` or the CSS `text-stretch` property. This
would allow the text to horizontally scale to fill the exact width provided
without changing the font height.
### What does the proposed API look like?
I propose adding a property to the `label` or `rich` text styles, perhaps
called `fontStretch` or an option within `overflow`.
**Option A (New Property):**
```javascript
label: {
show: true,
width: 50,
// This would stretch or compress the text to be exactly 50px wide
fontStretch: 'fit'
}
**Option B (Enhancing Overflow):**
label: {
show: true,
width: 50,
overflow: 'fit' // A new option that scales the text width to match the
defined width
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
