search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.58k stars 19.62k forks source link

Adding margin between yAxis labels #18644

Open sambhav2612 opened 1 year ago

sambhav2612 commented 1 year ago

Version

npm v5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMrGAJ4gCmRA5AG4CGANgK4XWwC-ANGicMIwBGwDESSwAZhXphmAJyrE89WhSx4AkgFt6Ac0VIOnTj3SMK-6ABMxsYHIgVoYGqrmQAxk2pdY5iS6w1P5g7Ny8YPyMkCC2YA66-nI09Lh4PrCp-AAKwBDOFMnEZJQ0eAAW9FbAAO5hJry6DjbEITQAzACkGQnlgdQALN2-wmCRWh3DsB4wYPT5ADL0ghSMRPGsDeikOPhEANqo6OgligBEXmAW9qRnpsdWMvQHvOhnWGP0HuWwAEoUeGYWgod1esDOADl6MDQcdwQBRHQQRiw45nACywEEyJB9zeAGF5ApnLAFsBLlBoKi3tkFFI5AorKTyTJKdSEVZmBSYLAACIUObIvDss4LfIAawoVg0cDF0HFIoAKsA5oxYPCMJQHE4PBRYAAKfKwUjSOR4ACUIv-5gYJI1Wsc0F1IsJDKcYFg-OAWhA9Ggtzx4NdxI9-MV-INWoA9H7oEDLYGMbNyoxSLAjZVrLAAMpMehyANgs4ANXzEGW5lgMt1zggqjwUYAQjBmMLE_aKB4rkywxH9dHY_GRR2u1Kc3mC8PNZ3u7BMc4U2mM36mbnGPnC3DISqILrYNlClArCLeTI9cAJLBGxB3OUT8AASRynqvNYII8rrBKnhYDV7OL8l0WAKGnbUnT1I1swEfN1WgQpdDTaokTgEUAAlalgHR_WNU0fwvYDQMdPdSGAZgvxUCC4CsAEIF0aBANgQFvkyH9gW-P1dyYWBqLwWjoF8CoKAFTCBS4ni-N8Kw5HoAJAN8FdJBxTC_T0ChgWcAA6NCMKwtMTXzPDLxAh0dT1EiyMqVR0zgVsGKwZhInxLBeV8ABxfhdErbNJTAb5fG0mplOw_SzTsIzCNM41SPIqyjQUWhHBqBiFJABRfQcaAgKg9c5DnYBOUrTFmFrTKcw2Lt5FxIsvS0dSwGFFAAF1AyyPAlhWNZiB0ORdHyIgAEYAAZfCSqwwHKIgACYAFZhrsNwJEYWoaEEBR6HFMJeA4ZreDwQ8AQOI5jmgaFFGoUtGHfHwwTwOYPHFGhIlVa64VOIgzkEfN2RmJaimoJohOgF7jnXDrbAqZaSDkTZwjhD9nlgfYwWG5HAxRuF0eOTH0Gx2BcfxtHCdR4mMaJ0mSaxsnjn6wMaYpnG0aarbfCOuETuBGgZQYS6rGBuFbq-B6gie7xAxOchzk-uR2WOH77BoRk-bhEHllWcHykhjY9Vhh4nhecmDcp-m8aphnjYJ83TZNy2bcN9A6bhB3jkmwMXeRpn0G2lAOCAA&_source=echarts-doc-preview

Steps to Reproduce

Just open the demo link shared

Current Behavior

yAxis labels are overlapping instead of auto-adjusting by adding the default margin between them when overflow is being wrapped

image

Expected Behavior

yAxis should not overlap and auto-adjust vertically WRT to the limited width under overflow wrap

Environment

- OS: macOS M1
- Browser: Brave
- Framework: React (echarts + echarts-for-react)

Any additional comments?

No response

helgasoft commented 1 year ago

Suggestion. Since yAxis seems to be static, you can add new line (\n) to break the longest texts. No need for axisLabel.width. Demo Code image

sambhav2612 commented 1 year ago

It still looks bad on my end, how can I improve this to auto-adjust both label and bar while respecting whatever the default margin is?

image