@vx/axis ticklabelprops dy not working

[maganuk]

After update to 0.0.159 or 0.0.160 from 0.0.158, setting the dy in ticklabelprops on the left or right axis doesnt seem to work.

tickLabelProps={() => ({ dy: '-0.4em', textAnchor: 'start' })}

[hshoff]

Thanks for the bug report @maganuk! We replaced axis tick labels with @vx/text in v0.0.159. Looks like we need to update@vx/text to support em/rem values for dx/dy

For now, the workaround is to override your Axis tickComponent:

<AxisLeft
   // ...stuff
   tickLabelProps={() => ({
     dy: '-0.4em',
     textAnchor: 'start'
   })}
   tickComponent={({ formattedValue, ...tickProps }) => (
      <text {...tickProps}>{formattedValue}</text>
   )}
/>

[sto3psl]

I would be happy to come up with a PR for this. The calculation for em to px should be pretty straightforward with the font size of the <Text /> element. But for rem I'm not quite sure. Would getComputedStyle(document.documentElement).fontSize be the correct way? It returns the font size in px which should equal 1rem.

[techniq]

@sto3psl based on a quick search that should work. Might be better to do this in userland and pass the pixel value to <Text dy={...} />?

[sto3psl]

@techniq I agree. I think supporting em is fine and if one needs rem it's not hard to do in userland. There can even be a hint in the docs how to work with rem.

[hshoff]

This plan sounds good to me

[hshoff]

fixed by #271