Angles not working

[DylanBrass]

Describe the bug

Whenever you put an angle like so :

<XAxis dataKey="serviceName" name={"Service"}
                               interval={0} angle={-45}
                               textAnchor="end" height={200}/>

It will either disapear (when -90 or 90 +) or got to the middle.

I am using React and Typescript, plus Rechart, all newest versions.

Reproduction

• Simply add an angle on an axis or even label

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that you're confident that this is a legitimate bug. To ask a question open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[EvHaus]

Confirmed. I took a look, and I'm not entirely sure what's wrong here. It almost seems like the transform origin is set incorrectly for <Text> elements inside react-pdf. You can see the labels rotate, but not relative to their element.

[DylanBrass]

Thank you, I thought I was going crazy haha, I wish I could help but I have near 0 experience with SVG's.

[urfx]

looks like you are adding an angle to a group of text items (as you said the axis) rather to each text item (ie the label)...

btw this helped me find my issue which I can fix. (not sure I can fix yours but will revert if I do)

[kylekz]

This is going to sound really dumb, but I fixed my radar chart issue with a small pnpm patch that resets the text transform rotate to 0 for elements with a specific class.

You can see the <PolarRadiusAxis> ticks being completely off here:

When I set the angle to 90, it's fixed, but I don't want the angle to be in the center:

https://github.com/EvHaus/react-pdf-charts/blob/dev/src/index.tsx#L305

case "text":
  if (baseProps.transform && attribs.class ===
    "recharts-text recharts-polar-radius-axis-tick-value") {
     baseProps.transform = baseProps.transform.replace(/rotate\(60(?=,)/g, 'rotate(0')
  }
  return renderTextElement({
    baseProps,
    chartStyle,
    children: children2,
    node
});

This is by no means perfect, but it's close enough for me. Not sure if this helps in diagnosing the root issue.