Alignment of axis values for inset/overlay axes

[ghost]

Hey @leeoniya, after reading your issue for strategies for auto axis.size I thought about one possible strategy which I think would be cheap to implement.

Current visual

The problem: when the axis size is not enough for the axis value length, the value gets clipped:

Desired

I managed to achieve the following visual using a negative gap along with size: 0:

axes: [
    {
        size: 0,
        gap: -32
    },
    {
        size: 0,
        gap: -50
    }
]

Even tough the values are still getting clipped, we could fix it by rendering the text aligned to the left instead of right:

Notice how the CPU Usage axis values are aligned to the left, which makes longer values like 100% still fully visible.

Also, and when using side: 1 // right side:

Then the text should be aligned to the right instead of left.

Suggested solution

Maybe introduce a property named align for the Axis type, which would allow us to achieve this desired visual. Since this should not require doing any additional renders, it would serve as one decent solution to the axis size problem.

[leeoniya]

hey @joaopaulobdac

that's a good hack, and i've recommended it before in #235 :)

however, i don't think this is a realistic general recommendation for the axis sizing problem; this overlaid style is visually nice, but ultimately feels rather niche, IMO.

Maybe introduce a property named align for the Axis type, which would allow us to achieve this desired visual.

that's probably a good idea independently of #333.

[ghost]

however, i don't think this is a realistic general recommendation for the axis sizing problem;

I only suggested this as one possible cheap way of dealing with the axis sizing problem, I agree with you that it's not the ultimate solution 👍

this overlaid style is visually nice, but ultimately feels rather niche, IMO.

In my opinion, the overlaid style is great for when you can't afford to lose graph space displaying the axis values in the sides due to having a small width amount.