Billboard.js: Missing bottom padding for gauge charts legend

[RonnyWeiss]

Hello

When using Gauges with Legends then therese no padding at the bottom of the legend. The others charts types have the padding at the bottom.

Gauge:

Line:

Would be very cool if you could fix that.

Kind regards and a nice weekend

Ronny

[watnab]

https://github.com/naver/billboard.js/blob/b929b989c3b440a95b94de022f597d3a1947b480/src/internals/ChartInternal.js#L936-L938

[michkami]

https://github.com/naver/billboard.js/blob/b929b989c3b440a95b94de022f597d3a1947b480/src/internals/ChartInternal.js#L936-L938

This code is my fault. I added it to create a gap between legend and gauge labels, as there was no padding between them.
As far I can see 10 pixel seem to be too much, it should be rather 4 pixel (same as between gauge label and gauge) gap to make it look more symetric.

I actually don't think that the legend is the only problem for the missing padding at the bottom of the chart.
If you remove + (hasGauge ? 10 : 0) there will be bottom padding if the legend is enabled and positioned at the bottom, but if you set legend_show = false or/and gauge_labels_show = false } gauge still won't have padding at the bottom.

By removing + (hasGauge ? 10 : 0) you can see, that the legend container does not render at the end od the gauge label container but in the middle of them.

The reason for this could be that the starting y coordinate for gauge labels is placed in the arc (not outside like you can see in the screenshot below) and is than moved by https://github.com/naver/billboard.js/blob/b929b989c3b440a95b94de022f597d3a1947b480/src/shape/arc.js#L843 to the final position under the arc.

But as I wrote above, adding margin to the legend won't fix the issue for all use cases.

[watnab]

It seems g.bb-chart-arc(the content of g.bb-chart) of the gauge should be a bit smaller.
However I could not find which function calculate the height.



I added the red border to the svg element.

[michkami]

[netil]

[netil]

[RonnyWeiss]

[michkami]

[RonnyWeiss]

[netil]