[Feature] Adaptive width/height of legend container

[hornta]

What problem does this feature solve?

Based on this issue: https://github.com/apache/echarts/issues/7887

We need our chart to adapt the height/width of the legends both vertical and horizontal type so that items doesn't overflow onto the graph area. Currently they only way is to hardcode a pixel/percentage value but it's not responsive.

[zxrrg]

There is a way in which you can make it dynamic. The idea is to retrieve the maximum length (in characters) and give that spacing to the grid (by multiplying it by X, depending on the font size).

MaxLength:

let maxLength = 0; const series = option.series.map((key) => { if (key.name.length > maxLength) { maxLength = key.name.length; } ....

GRid like this:

grid: { containLabel: true, right: showLegend ? maxLength * 9 : 40, bottom: 80, },

and thats it :)

[github-actions[bot]]

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[bot]]

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!