Label Text Width Fit Feature Request
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### 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
}
Contributor guide
Assessment
This issue has not been assessed yet.