Props Click to collapse

• activeDot"circle" | "cross" | "diamond" | "square" | "star" | "triangle" | "wye" | Function | Partial<ActiveDotProps> & DotSymbolOption | ReactNode | false | trueoptional

  DEFAULT: true

• angleAxisIdnumber | stringoptional

  DEFAULT: 0

• animationBeginnumberoptional

  Specifies when the animation should begin, the unit of this option is ms.

  DEFAULT: 0

• animationDurationnumberoptional

  Specifies the duration of animation, the unit of this option is ms.

  DEFAULT: 1500

  Examples:

  • Range Radar Custom Animation

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | EasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

  The type of easing function.

  DEFAULT: "ease"

• animationInterpolateFnAnimationInterpolateFn<RadarPoint, PolarLayout>optional

  Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.

  Available since Recharts 3.9

  Examples:

  • Animations guide
  • Range Radar Custom Animation

• animationMatchBy"append" | "index" | AnimationMatchBy<RadarPoint>optional

  Strategy for matching previous items to next items during animation. Determines how Recharts pairs old data points with new data points to create smooth transitions.

  • matchByIndex (default): match by array position with proportional stretching
  • matchAppend: match sequentially by index and treat newly appended items as new
  • matchByDataKey('someKey'): match by a data key from the payload
  • Custom function (item, index) => key: match by the returned key

  DEFAULT: "index"

  Examples:

  • *
  • *
  • matchAppend

• baseLinePointsArray<RadarPoint>optional

• classNamestringoptional

• connectNullsbooleanoptional

• dataKeyTypedDataKey<DataPointType, DataValueType>optional

  The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

  Decides how to extract the value from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value.

  If undefined, this component uses the dataKey of its value axis. The chart layout decides which axis that is, regardless of the axis type: YAxis in horizontal layout, XAxis in vertical layout, PolarRadiusAxis in centric layout, and PolarAngleAxis in radial layout. If both this component and the axis define a dataKey, this component wins.

  Examples:

  • Simple Radar Chart
  • Specified Domain Radar Chart
  • Range Radar Custom Animation

• dot"circle" | "cross" | "diamond" | "square" | "star" | "triangle" | "wye" | Function | Partial<Props> & DotSymbolOption | ReactNode | false | trueoptional

  Renders a dot at each data point. Options:

  • false: no dots are drawn;
  • true: renders the dots with default settings;
  • object: the props of the dot. This will be merged with the internal calculated props of each dot. Set symbol to draw a predefined symbol instead of a circle;
  • ReactElement: the custom dot element;
  • function: a render function of the custom dot. The legend cannot know what a custom element or function draws, so set a matching legendType;
  • string: name of a predefined symbol, such as 'diamond' or 'star', the same as in legendType. Use different symbols to tell series apart without relying on color. The legend icon shows the same symbol. To change the size of the symbol, use the object form with symbol and r.

  DEFAULT: false

• hidebooleanoptional

  DEFAULT: false

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of polygon will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

  DEFAULT: "auto"

  Examples:

  • Range Radar Custom Animation

• isRangebooleanoptional

• labelFunction | Props | ReactNode | false | trueoptional

  Renders one label for each point. Options:

  • true: renders default labels;
  • false: no labels are rendered;
  • object: the props of LabelList component;
  • ReactElement: a custom SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
  • function: a render function of custom label.

  DEFAULT: false

• legendType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

  The type of icon in legend. If set to 'none', no legend item will be rendered.

  By default, the legend icon shows the same predefined symbol as the data points, if they use one.

  DEFAULT: "rect"

• radiusAxisIdnumber | stringoptional

  DEFAULT: 0

• shapeFunction | ReactNodeoptional

  If set a ReactElement, the shape of radar can be customized. If set a function, the function will be called to render customized shape.

• tooltipType"none"optional

• zIndexnumberoptional

  Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

  Available since Recharts 3.4

  DEFAULT: 100

  Examples:

  • Z-Index and layers guide

Events Click to expand