Пользовательская метка на радарной диаграмме Recharts

У меня чертовски много времени, пытаясь заставить пользовательские метки на радарной диаграмме recharts работать. Я пробовал делать несколько вещей в соответствии с документами, поэтому решил, что брошу это волкам. Надеюсь, один из вас укажет мне правильное направление.

              <ResponsiveContainer>
                <RadarChart outerRadius={125} cy={175} data={ucRadarData}>
                  <Legend verticalAlign='top' height={36} />
                  <PolarGrid />
                  <PolarAngleAxis dataKey='value'>
                    <Label content={({ value }) => <Typography>{value}</Typography>} /> // When I remove this component, the labels get removed as well so I assume this is the component I want to target.
                  </PolarAngleAxis>
                  <PolarRadiusAxis domain={[lowestRangeStart, highestRangeEnd]} tickCount={tickArray.length} />
                  <Radar label={({ label }) => <Typography>{label}</Typography>} name='Self Assessment' dataKey='Self' stroke='#8884d8' fill='#8884d8' fillOpacity={0.6} /> // Also tried adding custom label here.
                </RadarChart>
              </ResponsiveContainer>

reactjs recharts
person Jgrimm    schedule 16.12.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Сделайте следующее: создайте функцию рендеринга для пользовательской отметки и добавьте ее в качестве опоры для галочки в свой компонент PolarAngleAxis.

function customTick({ payload, x, y, textAnchor, stroke, radius }) {
    return (
      <g
        className="recharts-layer recharts-polar-angle-axis-tick"
      >
        <text
          radius={radius}
          stroke={stroke}
          x={x}
          y={y}
          className="recharts-text recharts-polar-angle-axis-tick-value"
          text-anchor={textAnchor}
        >
          <tspan x={x} dy="0em">
            {payload.value}
          </tspan>
        </text>
      </g>
    );
  }

<PolarAngleAxis dataKey='value' tick={customTick}/>
person Gaurav Sobti    schedule 06.01.2020
comment
DX стилизации SVG - это все равно что положить голову в сушилку для белья. - person serraosays; 24.05.2021