RadarChart PolarAngleAxis getting cut off.

[kenperregaux]

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

Reproduction link

Steps to reproduce

Wrapping only happens if there is a space in the label. I would expect it to wrap regardless. Using scaleToFit removes the label entirely with or without a width.

What is expected?

Wrapping regardless of label containing spaces or scaleToFit to work.

What is actually happening?

See example above...text wraps only if label contains a space OR scaleToFit to work.

Environment	Info
Recharts	v2.7.3
React	18.2
System	Windows 11 Pro
Browser	Chrome Version 122.0.6261.71

[ckifer]

I would generally say this is an issue for margin on RadarChart to solve

margin however, does not take effect when using static cy, cx, and outerRadius. If you'd like to change those values while still having them be relative, you can change them as percentage values rather than whole numbers.

[kenperregaux]

That is fine until you make the chart smaller (say width 350) then you have to play with the margins until it fits? This makes no sense. If I use scaleToFIt or set a width on the Text it should wrap automatically (not just when the label has spaces).

[ckifer]

is using percentages an issue?

Recharts doesn't have any magic/dynamic "scale to fit" solutions for any charts at the moment besides using a ResponsiveContainer. scaleToFit is supposed to be based off of the Text component's width property. If you have a chart that changes size margin won't adjust automatically unless you make it dynamic yourself (which works well).

That being said, Text itself needs some work it seems (apologies, legacy inheritor of recharts. this functionality has been the same a long time before me).

For now I would just use something custom like the following or use a foreignObject to insert HTML and use CSS for line breaking:

        tick={(props) => {
          const { payload, ...rest } = props;
          return <text {...rest}>{payload?.value}</text>;
        }}

Here is a sandbox containing some of the not great behavior of the text component

The transform done here is incorrect it seems https://github.com/recharts/recharts/blob/3.x/src/component/Text.tsx#L243

[kenperregaux]

@ckifer thanks for the responses. I tried different iterations of using Text with width and scaleToFit and no labels show up when I do that (tweak my original codesandbox above and add width). What I ended up doing is trimming the labels and concating '...' if they were too long. Not idea but it is all I could come up with.

    const getLabel = (label) => {
        const chars = 18;
        const regExpression = new RegExp(`.{1,${chars}}`, 'g');
        const pieces = label.replace(/-/g,' ').split(' ').map(s => s.match(regExpression)).flat();
        return pieces.length > 1 ? label.substring(0, chars - 1).concat('...') : label;
    }

[ckifer]

Thanks for understanding!

If you'd like to contribute feel free! there's a ton of improvements to be had 😅