ReferenceDot with a custom shape

[sglza]

Describe the bug

I'm unable to render a custom ReferenceDot on a ScatterChart, as there seems to be an issue with the use of the <svg/> tag.

Reproduction

https://stackblitz.com/edit/react-pdf-charts-starter-wzl2bp?file=src%2FApp.tsx

const CustomShape = (props) => {
  const { cx, cy } = props;
  return (
    <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red" viewBox="0 0 24 24">
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
    </svg>
  );
}

<ReferenceDot x={500} y={500} shape={CustomShape} />

Validations

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

[sglza]

I'm not sure I would mark this as solved, but I'm leaving this as it might be useful for others

I was able to go around the issue by using a group tag with the transform property, more or less like this:

const CustomDot = (props) => {
  const { cx, cy } = props;
  return (
    <g transform={`translate(${cx - 12},${cy - 12})`} width={20} height={20} fill="red" viewBox="0 0 24 24">
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
    </g>
  );
};

[EvHaus]

Are you using server-side rendering or web-rendering? Your original code is working fine for me on the server.

Any chance you can give me a full reproducible example?

[sglza]

I've updated with a link to stackblitz:
https://stackblitz.com/edit/react-pdf-charts-starter-wzl2bp?file=src%2FApp.tsx

You can try it out yourself. The chart wont render until you take out the shape prop from ReferenceDot.

[EvHaus]

Thanks, that was helpful. The issue is with react-pdf itself. It doesn't supported nested <Svg> elements (see diegomura/react-pdf#943).

For react-pdf-charts, I suppose I could automatically convert nested <svg> elements to <g> but that might not deliver the desired results as <g> doesn't support custom dimensions.

[sglza]

agreed
could just be added to the known issues and call it a day