Long Label Bleeding into Horizontal Bar Chart

[andehwong]

Hey everyone, I'm having an issue with Horizontal Bar Chart and having it bleed into the graph itself.
I tried to put the scale and the graph in its own div but since they're both SVGs, it's not possible.

Is it possible to have the graph adjust width depending on the width of the label?

[williaster]

Going to convert this to a discussion since it's a usage question.

yes, SVG text is harder than HTML text! It would be easier to help with a concrete suggestion if you had a codesandbox / a shareable example, but in the absence here are some high-level options for you:

1. all-svg: @visx/text <Text /> component takes a width (which you could set to margin.left, etc) that will help wrap SVG text for you. See the gallery for more demos.

2. mix element types: you could re-implement your chart with a mix of SVG (bars) and HTML (labels) – the challenge with this is getting your text and bars to line up correctly – you effectively need some fixed heights on the label elements.

3. intermediate: you can actually use a <foreignObject /> element as an SVG child, and include HTML elements inside the foreignObject (the MDN link has a good example). this is sweet because then you get to use all the text layout benefits of HTML, though you still need to set a width for wrapping to work. you also need to set some combo of height /overflow="visible" on the foreignObject to see the child contents properly. one downside is that this sometimes won't copy/paste well into something like figma, but maybe that's not a concern for your use-case.

hope that helps.

[andehwong]

Hmmm, would this work if I'm using AxisLeft for displaying the scale values on my BarChartHorizontal graph?
It seems like I would need to create the left axis as its own separate entity/component and then wrap the svg into another entity/component, and with some styling magic, get it to display correctly.