[Bug] legend.padding not effective

[oo10]

Version

5.2.2

Link to Minimal Reproduction

https://codepen.io/simple11/pen/gOyPxZy

Steps to Reproduce

I used this configuration: legend.padding [0, 10, 0, 200] To set different values on the left and right, but it did not take effect. As shown in the figure below.

option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { type: 'scroll', padding: [0, 10, 0, 200] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Direct', type: 'bar', emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Direct1', type: 'bar', emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Direct12', type: 'bar', emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Email', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'bar', stack: 'Ad', emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Search Engine', type: 'bar', data: [862, 1018, 964, 1026, 1679, 1600, 1570], emphasis: { focus: 'series' }, markLine: { lineStyle: { type: 'dashed' }, data: [[{ type: 'min' }, { type: 'max' }]] } }, { name: 'Baidu', type: 'bar', barWidth: 5, stack: 'Search Engine', emphasis: { focus: 'series' }, data: [620, 732, 701, 734, 1090, 1130, 1120] }, { name: 'Google', type: 'bar', stack: 'Search Engine', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 290, 230, 220] }, { name: 'Bing', type: 'bar', stack: 'Search Engine', emphasis: { focus: 'series' }, data: [60, 72, 71, 74, 190, 130, 110] }, { name: 'Others', type: 'bar', stack: 'Search Engine', emphasis: { focus: 'series' }, data: [62, 82, 91, 84, 109, 110, 120] } ] };

Current Behavior

Always maintain the same padding on both sides

Expected Behavior

Display left and right according to my settings

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[MatthiasMert]

I think it has to do with the auto positioning of the legend. If you specify the position, eg. left: 0 the padding takes effect.

Example

[oo10]

I think it has to do with the auto positioning of the legend. If you specify the position, eg. left: 0 the padding takes effect.

Example

Thanks for your suggestion. But I don't think it will achieve my goal. When the quantity is sufficient to fill the width, it is ok, When there is only one legend, using left: 0 will result in being left aligned. I hope to increase the different padding on the left and right sides on the basis of centering.

As shown in the figure below, I would like to add padding to the legend and then center it, but in reality, 500 is not effective here.

[oo10]

The problem is that when align is auto, After setting padding in four directions, two will not take effect.

[helgasoft]

cant see your code from the figure, please use text next time. What @MatthiasMert says is correct - left will disable auto-centering and then padding works as expected. Example: legend: {left:0, type: "scroll", padding: [3, 222, 3, 222] }. Experiment and adjust.