Apply className to the RadarChart component.

[108yen]

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

What problem does this feature solve?

It would be possible to style each component with className.

What does the proposed API look like?

I want to apply a className to a RadarChart component, as in the following example

• grid-concentric
• PolarAngleAxis and tick
• PolarRadiusAxis and tick
• dot

      <RadarChart width={600} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <PolarGrid className="polar-grid-custom-className" />
        <PolarRadiusAxis
          angle={90}
          type="number"
          className="polar-radius-axis-custom-className"
          tick={{ className: 'polar-radius-axis-tick-custom-className' }}
        />
        <PolarAngleAxis
          dataKey="angle"
          type="number"
          domain={[0, 360]}
          tickCount={9}
          className="polar-angle-axis-custom-className"
          tick={{ className: 'polar-angle-axis-tick-custom-className' }}
        />
        <Radar dataKey="value" fillOpacity={0} stroke="#000" dot={{ className: 'radar-custom-className' }} />
      </RadarChart>

If it is acceptable to modify it, I will fix it.
PolarGrid.tsx

const ConcentricCircle: React.FC<ConcentricProps> = props => {
...
  return (
    <circle
      {...concentricCircleProps}
-      className="recharts-polar-grid-concentric-circle"
+      className={clsx('recharts-polar-grid-concentric-circle', props.className)}
      key={`circle-${index}`}
      cx={cx}
      cy={cy}
      r={radius}
    />
  );
};

// Draw concentric polygons
const ConcentricPolygon: React.FC<ConcentricProps> = props => {
...
  return (
    <path
      {...concentricPolygonProps}
-      className="recharts-polar-grid-concentric-polygon"
+      className={clsx('recharts-polar-grid-concentric-polygon', props.className)}
      key={`path-${index}`}
      d={getPolygonPath(radius, props.cx, props.cy, props.polarAngles)}
    />
  );
};

PolarRadiusAxis.tsx

  renderTicks() {
...
      return (
        <Layer
-          className="recharts-polar-radius-axis-tick"
+          className={clsx('recharts-polar-radius-axis-tick', get(tick, 'className'))}
          key={`tick-${entry.coordinate}`}
          {...adaptEventsOfChild(this.props, entry, i)}
        >
          {PolarRadiusAxis.renderTickItem(tick, tickProps, tickFormatter ? tickFormatter(entry.value, i) : entry.value)}
        </Layer>
      );
    });

    return <Layer className="recharts-polar-radius-axis-ticks">{items}</Layer>;
  }
...
  render() {
    const { ticks, axisLine, tick } = this.props;

    if (!ticks || !ticks.length) {
      return null;
    }

    return (
-      <Layer className="recharts-polar-radius-axis">
+      <Layer className={clsx('recharts-polar-radius-axis', this.props.className)}>
        {axisLine && this.renderAxisLine()}
        {tick && this.renderTicks()}
        {Label.renderCallByParent(this.props, this.getViewBox())}
      </Layer>
    );
  }

PolarAngleAxis.tsx

  renderTicks() {
...
      return (
        <Layer
-          className="recharts-polar-angle-axis-tick"
+          className={clsx('recharts-polar-angle-axis-tick', get(tick, 'className'))}
          key={`tick-${entry.coordinate}`}
          {...adaptEventsOfChild(this.props, entry, i)}
        >
          {tickLine && <line className="recharts-polar-angle-axis-tick-line" {...tickLineProps} {...lineCoord} />}
          {tick &&
            PolarAngleAxis.renderTickItem(tick, tickProps, tickFormatter ? tickFormatter(entry.value, i) : entry.value)}
        </Layer>
      );
    });

    return <Layer className="recharts-polar-angle-axis-ticks">{items}</Layer>;
  }
...
  render() {
    const { ticks, radius, axisLine } = this.props;

    if (radius <= 0 || !ticks || !ticks.length) {
      return null;
    }

    return (
-      <Layer className="recharts-polar-angle-axis"
+      <Layer className={clsx('recharts-polar-angle-axis', this.props.className)}>
        {axisLine && this.renderAxisLine()}
        {this.renderTicks()}
      </Layer>
    );
  }

generateCategoricalChart.tsx

    renderPolarAxis = (element: any, displayName: string, index: number) => {
      const axisType = get(element, 'type.axisType');
      const axisMap = get(this.state, `${axisType}Map`);
      const axisOption: BaseAxisProps | undefined = axisMap && axisMap[element.props[`${axisType}Id`]];

      return cloneElement(element, {
        ...axisOption,
-        className: axisType,
+        className: clsx(axisType, axisOption.className),
        key: element.key || `${displayName}-${index}`,
        ticks: getTicksOfAxis(axisOption, true),
      });
    };

Radar.tsx

  static renderDotItem(option: RadarDot, props: any) {
    let dotItem;

    if (React.isValidElement(option)) {
      dotItem = React.cloneElement(option, props);
    } else if (isFunction(option)) {
      dotItem = option(props);
    } else {
-      dotItem = <Dot {...props} className="recharts-radar-dot" />;
+      dotItem = (
+        <Dot {...props} className={clsx('recharts-radar-dot', typeof option !== 'boolean' ? option.className : '')} />
+      );
    }

    return dotItem;
  }

[ckifer]

Feel free to PR! Thank you

[ckifer]

resolved in linked PRs