label overlap with larger font sizes

Community Help
1

I’m using the style setting with fontSize to make labels larger. This tends to cause labels to overlap, as in this example: Untitled / Robert Messer's Workspace | Observable .

I’ve found that I can use the margin setting to compensate and prevent the overlap. That’s fine, but is there any way to prevent the labels from overlapping by default, so that I don’t have to manually tweak them depending on the font size setting?

2

Hi @rmesser - I don’t know that there’s a method within Plot to do this, but as a hack, you can try something like creating a font size variable, e.g. fontSize = 1.2, and then writing your margin to update proportionally to it, e.g. marginBottomEstimate = fontSize * 50 and then in your plot

style: {fontSize: fontSize + "em" },
  marginBottom: marginBottomEstimate

Here’s a suggestion that does this. It sorta works :slight_smile:

3

Thanks @aaronkyle for that suggestion. I tried it out and agreed that this mostly works.

In general I think preventing label collisions is a tricky problem to solve generally, so individual chart tweaks to margins will probably always be needed from time to time. Regards.

1 Like