[Bug] Grid.containLabel is set to true, but axisLabel is still truncated

[wenhai974]

Version

5.3.1

Link to Minimal Reproduction

https://codepen.io/littleKoi/pen/xxpJJLy

Steps to Reproduce

I've set Grid.containLabel to true, but the axisLabel is still out of the container, causing it to be truncated.

Current Behavior

This is an EX: ex

Expected Behavior

If grid.containLabel is true, all lables should be included in the container during echarts init or resizes.

Perhaps the spacing algorithm for axisLabel should be optimized for the length of the lable at the end

Environment

- OS:macOS Monterey
- Browser:Chrome 96.0.4664.55
- Framework:

Any additional comments?

No response

[jiawulin001]

This is caused by a bug in the logic of containLabel here:

echarts/src/coord/cartesian/Grid.ts

Lines 188 to 204 in 2a67f86

	if (isContainLabel) {
	each(axesList, function (axis) {
	if (!axis.model.get(['axisLabel', 'inside'])) {
	const labelUnionRect = estimateLabelUnionRect(axis);
	if (labelUnionRect) {
	const dim: 'height' | 'width' = axis.isHorizontal() ? 'height' : 'width';
	const margin = axis.model.get(['axisLabel', 'margin']);
	gridRect[dim] -= labelUnionRect[dim] + margin;
	if (axis.position === 'top') {
	gridRect.y += labelUnionRect.height + margin;
	}
	else if (axis.position === 'left') {
	gridRect.x += labelUnionRect.width + margin;
	}
	}
	}
	});

Echarts is adjusting the grid's width by the width of yAxis label and grid's height by the height of xAxis label. But the overflow in width caused by xAxis label is not considered.
This is a logic bug which fails to achieve the goal of option containLabel, but can be solved quite easily by adjusting grid.width.
@plainheart @pissang Do we need a PR to solve this? I can submit one if needed.

[wenhai974]

This is caused by a bug in the logic of containLabel here:

echarts/src/coord/cartesian/Grid.ts

Lines 188 to 204 in 2a67f86

	if (isContainLabel) {
	each(axesList, function (axis) {
	if (!axis.model.get(['axisLabel', 'inside'])) {
	const labelUnionRect = estimateLabelUnionRect(axis);
	if (labelUnionRect) {
	const dim: 'height' | 'width' = axis.isHorizontal() ? 'height' : 'width';
	const margin = axis.model.get(['axisLabel', 'margin']);
	gridRect[dim] -= labelUnionRect[dim] + margin;
	if (axis.position === 'top') {
	gridRect.y += labelUnionRect.height + margin;
	}
	else if (axis.position === 'left') {
	gridRect.x += labelUnionRect.width + margin;
	}
	}
	}
	});

Echarts is adjusting the grid's width by the width of yAxis label and grid's height by the height of xAxis label. But the overflow in width caused by xAxis label is not considered.
This is a logic bug which fails to achieve the goal of option containLabel, but can be solved quite easily by adjusting grid.width.
@plainheart @pissang Do we need a PR to solve this? I can submit one if needed.

Thank you!
If it's just a custom chart, adjusting grid.width will do the trick.
However, in real application scenarios, the length and number of lable on the X-axis may not be determined, so adjusting grid.width is not elegant.
And in order for all data not to be truncated, there will be too much white space on the right side of the grid.

[pissang]

@jiawulin001 Yeah it's an bug exists for a long time. A PR will be great!

[jiawulin001]

Sure, submitting a PR.

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!