[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'
        }
      }
    },
  },

[SchnWalter]

The problem is visible on many scenarios where the legend container width is defined and the legend items are long. Here are some hints for whom may want to address the root cause:

The issue seems to be in ‎LegendView._createItem‎(), it's rendering the legend item text at the full width, regardless of the legend container width or the legend icon+spacing;

echarts/src/component/legend/LegendView.ts

Lines 465 to 474 in ef926fa

	itemGroup.add(new graphic.Text({
	style: createTextStyle(textStyleModel, {
	text: content,
	x: textX,
	y: itemHeight / 2,
	fill: textColor,
	align: textAlign,
	verticalAlign: 'middle'
	}, {inheritColor: textColor})
	}));

It should have a defined max-width passed down from render() to the _createItem() method, here's a partial patch applied directly on the built package:

diff --git a/node_modules/echarts/lib/component/legend/LegendView.js b/node_modules/echarts/lib/component/legend/LegendView.js
index ffaaa42..5070daf 100644
--- a/node_modules/echarts/lib/component/legend/LegendView.js
+++ b/node_modules/echarts/lib/component/legend/LegendView.js
@@ -102,7 +102,6 @@ var LegendView = /** @class */function (_super) {
     if (selector && (!selectorPosition || selectorPosition === 'auto')) {
       selectorPosition = orient === 'horizontal' ? 'end' : 'start';
     }
-    this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
     // Perform layout.
     var positionInfo = legendModel.getBoxLayoutParams();
     var viewportSize = {
@@ -111,6 +110,7 @@ var LegendView = /** @class */function (_super) {
     };
     var padding = legendModel.get('padding');
     var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);
+    this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, maxSize);
     var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
     // Place mainGroup, based on the calculated `mainRect`.
     var layoutRect = layoutUtil.getLayoutRect(zrUtil.defaults({
@@ -255,7 +255,7 @@ var LegendView = /** @class */function (_super) {
       enableHoverEmphasis(labelText);
     });
   };
-  LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) {
+  LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api, maxSize) {
     var drawType = seriesModel.visualDrawType;
     var itemWidth = legendModel.get('itemWidth');
     var itemHeight = legendModel.get('itemHeight');
@@ -308,7 +308,8 @@ var LegendView = /** @class */function (_super) {
         y: itemHeight / 2,
         fill: textColor,
         align: textAlign,
-        verticalAlign: 'middle'
+        verticalAlign: 'middle',
+        width: maxSize.width - textX,
       }, {
         inheritColor: textColor
       })

And then there's also hitRect, which needs to be dealt with, I've just patched it away for testing purposes.

And the same is probably true for the scrollable legend view.

[helgasoft]

👍 for digging deeper. LegendView._createItem‎() is similar to this:

echarts/src/component/visualMap/PiecewiseView.ts

Lines 75 to 88 in 9a20185

	itemGroup.add(new graphic.Text({
	style: createTextStyle(textStyleModel, {
	x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
	y: itemSize[1] / 2,
	text: piece.text,
	verticalAlign: textStyleModel.get('verticalAlign') || 'middle',
	align: textStyleModel.get('align') || itemAlign as TextAlign,
	opacity: zrUtil.retrieve2(
	textStyleModel.get('opacity'),
	visualState === 'outOfRange' ? 0.5 : 1
	),
	}),
	silent
	}));

which is part of a recent fix to a similar problem (#20956) by @plainheart
Just trying to connect the dots...

[SchnWalter]

I've managed to find the time to write a test and fix the issue: #20967

[ddkwork]

The problem is visible on many scenarios where the legend container width is defined and the legend items are long. Here are some hints for whom may want to address the root cause:

The issue seems to be in ‎LegendView._createItem‎(), it's rendering the legend item text at the full width, regardless of the legend container width or the legend icon+spacing;

echarts/src/component/legend/LegendView.ts

Lines 465 to 474 in ef926fa

itemGroup.add(new graphic.Text({
style: createTextStyle(textStyleModel, {
text: content,
x: textX,
y: itemHeight / 2,
fill: textColor,
align: textAlign,
verticalAlign: 'middle'
}, {inheritColor: textColor})
}));
It should have a defined max-width passed down from render() to the _createItem() method, here's a partial patch applied directly on the built package:

diff --git a/node_modules/echarts/lib/component/legend/LegendView.js b/node_modules/echarts/lib/component/legend/LegendView.js
index ffaaa42..5070daf 100644
--- a/node_modules/echarts/lib/component/legend/LegendView.js
+++ b/node_modules/echarts/lib/component/legend/LegendView.js
@@ -102,7 +102,6 @@ var LegendView = /** @Class */function (_super) {
if (selector && (!selectorPosition || selectorPosition === 'auto')) {
selectorPosition = orient === 'horizontal' ? 'end' : 'start';
}

• this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
  // Perform layout.
  var positionInfo = legendModel.getBoxLayoutParams();
  var viewportSize = {
  @@ -111,6 +110,7 @@ var LegendView = /** @Class */function (_super) {
  };
  var padding = legendModel.get('padding');
  var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding);

• this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, maxSize);
  var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
  // Place mainGroup, based on the calculated mainRect.
  var layoutRect = layoutUtil.getLayoutRect(zrUtil.defaults({
  @@ -255,7 +255,7 @@ var LegendView = /** @Class */function (_super) {
  enableHoverEmphasis(labelText);
  });
  };

• LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) {

• LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api, maxSize) {
  var drawType = seriesModel.visualDrawType;
  var itemWidth = legendModel.get('itemWidth');
  var itemHeight = legendModel.get('itemHeight');
  @@ -308,7 +308,8 @@ var LegendView = /** @Class */function (_super) {
  y: itemHeight / 2,
  fill: textColor,
  align: textAlign,

•    verticalAlign: 'middle'
  

•    verticalAlign: 'middle',
  

•    width: maxSize.width - textX,
   }, {
     inheritColor: textColor
   })
  

And then there's also hitRect, which needs to be dealt with, I've just patched it away for testing purposes.

And the same is probably true for the scrollable legend view.

hello you, are you planning to implement such a widget at a later stage?
https://github.com/ddkwork/ux

I found the interaction behavior of the right click context menu strange during the implementation of this widget, so I'm looking forward to your implementation of a right click context menu in your way, thanks.