[Bug] Plain legend label overflows container if text is too long

[mrgawrys]

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack&code=PYBwLglsB2AEC8sDeAoFtYBsCmBzb0AJgFzLoaxgCeI2pA5CJgIYTT3kC-ANGhgB4BBfhADOpVBUo06segDdmmAK7YOGHuSrCxE8hmq0GAY2Zg8wAE5V6vKYTPNSAbXoBZGLbkAVVV_oA6tiE_t4AFsr-AGKWEP4AymYJyuwAulx2sKLYsdjisM76ZFIY0MwAtrL08djMlsZhsACi0LgQNXUNza3ttfWNLW3QHf3dQyNdg2zDfZM9M50D8xNL47OrbCtjm-vbC6NT-3Nri3tbh9BqmVKGVQBGdbZFGKJgzMYA1gxgwG-YTyUsMw7thMHpAS8wsAAO6kMCWVTPWCaQHYcogMLMUS6YoQgBmwGMyny9GyuVE6hKKJKDjeLgAHAAmAAM3Fg9IAzIy2QBOZkARl5HIALGz-Yy-WKORzWbB-VzmekpJxyOlOABuIA

Steps to Reproduce

1. Create any chart with multiple series
2. Add legend of type 'plain'
3. Set very long name for one of the series

Current Behavior

Legend label overflows the screen

Expected Behavior

Legend label has a break somewhere in the text and continues on the next line or Legend label is truncated with ellipsis

Environment

No response

Any additional comments?

No response

[helgasoft]

  legend: {
    type: 'plain', textStyle:{width:200, overflow:'truncate'}
  }

📌 please close issue if problem solved.

[mrgawrys]

Yes, to an extent it does, but rather as a workaround than a fix. Proposed way requires us to set maximum width at an arbitrary length. For me at least, expected behavior would be to have the possibility for the label to fill all available space and truncate if it's not possible to display it whole.

[helgasoft]

label to fill all available space and truncate if it's not possible to display it whole.

Makes sense. Tried to do it with rich but found several width problems:

  legend: {
    type: 'plain', 
    width: 22,    // does not work
    formatter: '{trr|{name}}',
    textStyle:{ 
      width: 100,  // does not work along with formatter
      overflow: 'truncate',
      rich: {
        trr: { 
          width: '33%',   // does not work
          color: 'violet'
        }
      }
    },
  },