Bottom label text is touching the component

[ghost]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://recharts.org/en-US/examples/SimpleRadarChart

Steps to reproduce

Just look at the demo in the documentation

What is expected?

Bottom label is not supposed to touch the component, there's supposed to be some gap, like with all other labels

What is actually happening?

Label is touching the component

Environment	Info
Recharts	v2.1.6
React	18
System	Windows 10
Browser	Chrome

---

Example picture =>

Is there a way to fix it, or configure the label distance?

[ckifer]

Hi,

You can create your own ticks with the tick prop

      <PolarAngleAxis
        dataKey="subject"
        tick={(props) => {
          const { payload, ...rest } = props;
          return (
            <text {...rest} y={rest.y + 4}>
              {payload?.value}
            </text>
          );
        }}
      />

Then you can add or subtract from any of the position values to get it where you want

https://codesandbox.io/s/simple-radar-chart-forked-0yqyyg?file=/src/App.tsx:805-1072

This does make sense to fix dig into internally and see what that point is being calculated as - labeling this as a bug/enhancement issue

[ghost]

Looking forward to it!