tickPadding for xy chart

[davidhan527]

Thanks for the awesome chart library. I wish I found out about this sooner.

D3 allows you to add tickPadding (d3.axisBottom(xAxis).tickPadding(20)) to axis labels so that you can increase the distance between the axis label and the axis.

Is there a way to do this or something similar in the XY chart? I wasn't able to find it in the docs.

Thank you for your help!

[williaster]

Hey @davidhan527 👋 thanks for checking out visx. I converted this to a discussion rather than an issue since it's mostly about usage.

The @visx/xychart Axis mostly wraps the @visx/axis component, handling a couple of things for you to make it simpler to use. I can't quite tell if you are trying to offset tick labels or axis labels (I think tickPadding offsets tick labels). In either case, this ultimately is determined by tickLabelProps and labelProps for the axis label, which accepts Partial<TextProps> from @visx/text. Specifically you would want to modify dx to adjust the x offset (for a y-axis) or dy to adjust the y offset (for an x-axis)

The @visx/xychart Axis sets default values for these Axis props based on your chart theme, so if you were to override them you would lose the theme font/colors, etc. unless you also used the theme in your override. Here's an example codesandbox that offsets the x-axis ticks while keeping the rest of the theme. If you wanted to modify the axis label offset you'd override theme.axisStyles.x.bottom.axisLabel.dy instead.

Hope that helps.

[davidhan527]

That worked!

Thank you very much for your detailed response.