Props Click to collapse

• activeShape(union of 5 variants)optional

• 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

• 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<RadialBarDataItem, 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

• animationMatchBy"append" | "index" | AnimationMatchBy<RadialBarDataItem>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.

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

  DEFAULT: "append"

  Examples:

  • *
  • *
  • matchAppend

• background(union of 7 variants)optional

  Renders a background for each bar. Options:

  • false: no background;
  • true: renders default background;
  • object: the props of background rectangle;
  • ReactElement: a custom background element;
  • function: a render function of custom background.

  DEFAULT: false

  Examples:

  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

• barSizenumberoptional

  The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

• childrenReactNodeoptional

• classNamestringoptional

• cornerIsExternalbooleanoptional

  DEFAULT: false

• cornerRadiusnumber | stringoptional

  DEFAULT: 0

  Examples:

  • Radial Bar Chart with Click to Focus Legend

• dangerouslySetInnerHTMLObjectoptional

• 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.

  Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

  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.

  Examples:

  • Simple Radial Bar Chart
  • Radial Bar Chart with Click to Focus Legend

• forceCornerRadiusbooleanoptional

  DEFAULT: false

• formatterFormatteroptional

  Formats the value displayed in the tooltip for this RadialBar. When set, takes precedence over the formatter prop on the Tooltip component.

• hidebooleanoptional

  DEFAULT: false

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of radial bars 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"

• labelFunction | Props | ReactNode | false | trueoptional

  Renders one label for each data 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

  Examples:

  • Simple Radial Bar Chart

• 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.

  DEFAULT: "rect"

• maxBarSizenumberoptional

• minPointSizenumberoptional

  DEFAULT: 0

• radiusAxisIdnumber | stringoptional

  DEFAULT: 0

• shape(union of 5 variants)optional

  If set a ReactElement, the shape of radial bar sectors can be customized. If set a function, the function will be called to render customized shape. During animations, the function shape also receives animationElapsedTime, isAnimating, and isEntrance. By default, renders a sector.

  Examples:

  • Radial Bar Chart with Click to Focus Legend

• stackIdnumber | stringoptional

• tooltipType"none"optional

• zIndexnumberoptional

  DEFAULT: 300

Events Click to expand