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.

[JElgar]

I noticed the same behavior when using a rotation on the YAxis label. I.e.

<YAxis
	label={{
		value: `My y axis label`,
		style: { textAnchor: 'middle' },
		angle: -90,
		position: 'left',
		offset: 0,
	}}
/>

Currently the rotated label ends up on the chart rather than to the left of it.

[jontesen]

Hi, I’ve noticed the same issue with the YAxis label. Adding angle: -90 not only rotates the text but also translates it above the Y-axis, which shouldn’t happen.

I’m wondering if there’s been any update or potential fix for this issue?

[EvHaus]

This is mostly a note to myself. Here's a minimal repro of the issue:

An <svg> element with some angled text in regular HTML renders them on the bottom and rotated: REPL Link

In react-pdf the same equivalent <Svg /> code generates wrong positioning: REPL Link

Some theories that need testing:

• It's either the rotate() function in the transform attribute that's broken in react-pdf, or
• It's the positioning in the tspan elements that isn't working. react-pdf is known to have limited support for tspan elements, or
• It would be something else too.

Needs further investigation.

[SM1512J]

@EvHaus Any update on this issue - I am still experiencing it?

[EvHaus]

@SM1512J This is a bug in react-pdf's engine and it's not very likely that it will be something I could fix in this library. I'm keeping the ticket open mostly so that I can try to help the react-pdf team isolate where the issue is at some point.

The team there did some work recently on improving <Tspan> support, but I just checked and looks like it didn't help resolve this problem. So more work will need to be done to handle transforms.

[SM1512J]

@EvHaus Understood, thank you. Is there currently any known alternative/work-around which could be used to create the same 90 degree angled Y-Axis Label?

[EvHaus]

Unfortunately I don't have any good suggestions here, other than to manually render the text outside the charts and position it absolutely over-top the chart, similar to how this example super-positions an image. It's a really terrible workaround and might not be viable for you, but it's the best suggestion I have at this time if you absolutely must have angled labels.

[benkraus]

would this affect pie charts not working? I'm having issues there :(

[EvHaus]

@benkraus No. Pie charts should work just fine. Here's an example.