How do I get the dimension of <AxisLeft>?

[parkdoeui]

I am trying to fit a bar chart with axes in a container. The issue is that I cannot reserve the right amount of space for AxisLeft because its width is dynamic based on data. Giving it a fixed space causes cropped tick labels as a result.

I was trying to get the width of the <AxisLeft> then calculate the left margin but seems like I cannot use useRef() to retrieve the dimension of it.

How should I solve this problem? Thanks!

[williaster]

Hey @DoParkEQ thanks for checking out visx.

This is a pretty common challenge with visualization engineering with svgs because svgs don't gracefully handle overflow and instead clip their contents. You're right that we don't currently expose ref on Axis (which powers AxisLeft/Right/Top/Bottom), I'd be happy to review a PR if you or someone else wants to add that.

A couple other ideas:

• in your chart you have numbers of the form 1,000,000,000, you could consider simply truncating these using scientific notation (e.g., 1k, 100k, 100M, 1B, etc.) to keep the labels short
• you could leverage Axis.tickLabelProps which is a function of the form (value: TickValue, index: number) => Partial<TextProps>, where TextProps is any props from @visx/text's Text component. with that you can achieve the following effect using either width for wrapping (probably set to margin.left in your example; note that it will not wrap unless you have spaces in your label, which may not apply here) or width + scaleToFit, which will scale the tick labels to the available space.

• finally, you could try using @visx/text's util function getStringWidth. This takes a string as input (with optional CSS styles to apply) and returns its width. If you know the tick values + labels ahead of time, you could compute these and set margin.left to the max string width.

Overall I kind of like your suggestion of exposing a ref, seems simplest 😄

[mtoneil]

@williaster I'm facing a similar problem where I'm looking to set the left margin so that the axis labels take up the minimum amount of space required, but don't cut off the text. I was hoping to use your suggestion regarding getStringWidth, however I don't know the tick values ahead of time. I also don't want to use scaleToFit because we want a fixed font size. Any suggestions? If there were a utility function that finds tick values from our data points which I could invoke separately, that would let me find all their widths. Does anything like that exist? Thanks!

[parkdoeui]

Thanks for answering! I'll try the methods you suggested 👍

[VigneshTrantor]

I'm facing the same problem too :(