Legend overlaps x-axis label with larger font-size

[irislieuw]

Description

It looks like billboard does a good job giving the x-axis label adequate space depending on the font-size applied to the .bb-axis-x-label element. However when the label is shifted down, the legend does not also get shifted, so they end up overlapping. Is it possible to shift the legend along with the x-axis label so this overlapping does not occur?

with a small font size

medium font size

larger font size

Steps to check or reproduce

Here's the fiddle behind the screenshots. If you change the font-size being applied to the labels you can see the x-axis label get moved up or down, while the legend stays in place. https://jsfiddle.net/irislieuw/qnsk8w1z/

[netil]

@irislieuw, well adjusting via padding.bottom option will fix the issue. Is enough for your use case?

padding: {
    bottom: 30
},

[irislieuw]

Is there a way for billboard to adjust padding automatically? We are attempting to setup media queries to make the charts more responsive, so 1 static padding probably won't work...

On Wed, Sep 4, 2019 at 19:18 Jae Sung Park [email protected] wrote:

@irislieuw https://github.com/irislieuw, well adjusting via padding.bottom option will fix the issue. Is enough for your use case?

padding: { bottom: 30 },

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/naver/billboard.js/issues/1070?email_source=notifications&email_token=AC3FQDTYHMJEHGLVY5CKOJLQIBUANA5CNFSM4ITYCE32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD55TAJA#issuecomment-528166948, or mute the thread https://github.com/notifications/unsubscribe-auth/AC3FQDQ3WFN6BQIEEKVH2OTQIBUANANCNFSM4ITYCE3Q .

[netil]

I looked if this can be solved. The issue here is axis label texts are rendered after the axes are generated. To be solved, label text's dimension should be determined before the axes generation, which comes with the cost to determine it.

I'll look for it, how to improve on this.

[adschm]

@irislieuw @netil I have a similar issue, and I've been unable to apply a proper padding manually.

Would somebody be so kind to alter the fiddle linked above (or any other) so that the legend is moved down? Just a stupid fixed-value example I can work on from ...

[netil]

@adschm, you can try also axis.x.height

axis: {
    x: {
        height: 20
    }
}