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.
- Truncation (
truncate) hides important information.
- Wrapping (
break) often breaks the visual layout or overflows the symbol vertically.
- 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):
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
}
What problem does this feature solve?
Currently, ECharts provides
widthandoverflowproperties (liketruncateorbreak) for labels inmarkPoint,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
markPointwith custom symbols like pins or boxes—we have a fixed-width area for text.truncate) hides important information.break) often breaks the visual layout or overflows the symbol vertically.I am looking for a feature similar to the SVG attribute
textLengthwithlengthAdjust="spacingAndGlyphs"or the CSStext-stretchproperty. 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
labelorrichtext styles, perhaps calledfontStretchor an option withinoverflow.Option A (New Property):