echart yAxis and xAxis label cutout

[t0n1zz]

hi, so i am using echart in my bootstrap project and i use this styling to control the size of the chart

<style scoped>
	.echarts{
		width: 100vw;
		min-width: 50vw;
		height: 50vh;
	}
</style>

and i find there is some anoying problem that happen if only i have long yAxis or xAxis label like this

so how to fixed it? to make sure there is no cutout in yAxis and xAxis label?

[100pah]

Try http://echarts.baidu.com/option.html#grid.right please ~

[t0n1zz]

well i tried it but it just have a weirds issue, i make grid left and right 10% and it just feels not right comparing with chartjs it have a responsive parameters that can automatically create grid size according to the container.

[knadt]

Any update?

[laks90Js]

Am alternate option is to adjust with grid margins and set a fixed width for labels while they can be represented with ellipsis for longer ones.

[k1ngbanana]

Am alternate option is to adjust with grid margins and set a fixed width for labels while they can be represented with ellipsis for longer ones.

stackoverflow link

i have try this links method, and it helps me.
the solution in the link is set property below

grid: { containLabel: true }

hopes this also helps u

[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!