(https://i.sstatic.net/glFdbOIz.png)

Here’s an image to make it clearer for you and code

<ResponsiveContainer width="100%" height={400}>
          <RadarChart cx="50%" cy="50%" outerRadius="80%" data={paginateDate}>
            <PolarGrid />
            <PolarAngleAxis
            dataKey="title"
            tickFormatter={(value: string) =>
              `${value}`}
          />
          <PolarRadiusAxis angle={30} domain={[0, maxValueData]} />
          <Radar name={props.title_first_radar} dataKey="first_radar_value" stroke={g11} fill={g11} fillOpacity={0.6} />
          <Radar name={props.title_second_radar} dataKey="second_radar_value" stroke={g5} fill={g5} fillOpacity={0.6} />
          <Tooltip
              content={({ payload, active }: ITooltipContent<IGraphRadarData>) => {
                  if (active && payload && payload.length) {
                      return props.renderTooltip(payload);
                  }
                return null;
              }}
              cursor={{ fill: 'transparent' }}
            />
          </RadarChart>
      </ResponsiveContainer>

The problem with my RadarChart is that when my title is much too long, I want it to be on 2 lines.

I’ve tried a custom Tick but it doesn’t work because the title is never well placed.

Can you help?