Skip to content

Label Text Width Fit Feature Request #21607

@amokrunnr

Description

@amokrunnr

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):

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
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions