[xychart] How to ensure extra height for rotated ticks when using parentSize

[chrisbenincasa]

I'm wondering if there is an option that can be passed to change the size of an area chart w/ xyseries in order to allow more room for rotated tick labels. I'm using withParentSizeModern to have charts displayed within a flex grid, but can't seem to find a way to prevent rotated tick labels from cutting off.

I realize this is because the labels are translated - there's probably not a foolproof way of doing this. But I'm wondering if there is some configuration I'm missing that would at least allow me to manually change the size of the chart itself to account for the extra space needed?

Screenshot of the cutoff labels:

In context:

Snippet of how the chart is setup:

 <DataProvider {...config}>
   <XYChart>
     <ZeroClipPath idAbove="cumpl-clip-above" idBelow="cumpl-clip-below" />
     <Axis
       orientation="bottom"
       numTicks={chartData.length}
       strokeWidth={1}
       stroke={grey[500]}
       tickFormat={formatDate}
       tickLabelProps={() => ({
         angle: -45,
         textAnchor: 'end',
         scaleToFit: 'shrink-only',
       })}
     />
     <Axis
       orientation="left"
       numTicks={chartData.length}
       stroke={grey[500]}
     />
     <Grid numTicks={4} strokeDasharray="2" />
     <AreaSeries
       dataKey={'>0'}
       data={chartData}
       xAccessor={xAccessor}
       yAccessor={(d) => toUnit(d.cumulativePl)}
       curve={curveMonotoneX}
       lineProps={{
         stroke: green[300],
       }}
       fillOpacity={1}
       fill={green[100]}
       clipPath="url(#cumpl-clip-above)"
     />
     <AreaSeries
       dataKey={'<0'}
       data={chartData}
       xAccessor={xAccessor}
       yAccessor={(d) => toUnit(d.cumulativePl)}
       curve={curveMonotoneX}
       lineProps={{
         clipPath: 'url(#cumpl-clip-below)',
         stroke: red[300],
       }}
       fillOpacity={1}
       fill={red[100]}
       clipPath="url(#cumpl-clip-below)"
     />
   </XYChart>
 </DataProvider>

[williaster]

Hey @chrisbenincasa 👋 thanks for checking out visx, I'm going to convert this to a discussion since it's more about usage than an issue.

This is a tricky thing to do dynamically, to do it properly you basically have to render your tick text with font/letter-spacing/font-size/etc. applied and measure its width. then you can ensure the proper width (and in your case take rotation into account which wouldn't be that hard). I have a couple thoughts:

1. manually you can very easily just increase the chart bottom margin <XYChart margin={{ ...top/right/left, bottom: 100 }} {...} />. In the docs this is just described as Margin but if you have TS you'll see { top: number; right: number; bottom: number; left: number }

2. each tick is a <Text /> component from @visx/text and so any of those props are valid inside tickLabelProps. That includes width, which is required for your shrink-only prop to have an effect. (I believe XYChart sets left/right Axis tick width to margin.left/right by default, but does not set top/bottom tick width)

3. if you'd actually like to measure exact tick text size, check out this discussion which describes @visx/text's util function getStringWidth

Hope that helps! good looking chart :)

[chrisbenincasa]

Thanks for the reply! And apologies for not opening this in discussions to begin with.

I realized I was using margin incorrectly, I think. I expected DataContext.config.initialDimensions to pass the margin along to the XYChart and was confused why that wasn't working. Passing the margin manually into the XYChart seems to be working now. I can tweak that a little, along with some other changes (shorter labels, lower rotation angle, dx/dy prop) to make it more functional for now. I think scaleToFit might come in handy for me as well!

Appreciate the help!