Sector

API reference for the Recharts Sector component

Renders a circular sector shape, commonly used in pie and radial bar charts.

A sector is defined by center coordinates, inner and outer radii, and start and end angles. It can be rendered as a full circle, a donut segment, or a pie slice.

Props

Positioning

cx · number · default: "0"

The x-coordinate of the center point in pixels.

cy · number · default: "0"

The y-coordinate of the center point in pixels.

innerRadius · number · default: "0"

The inner radius of the sector in pixels. Set to 0 for a pie slice without a hole.

outerRadius · number · default: "0"

The outer radius of the sector in pixels.

Angles

startAngle · number · default: "0"

The start angle of the sector in degrees. 0 degrees is at the 3 o’clock position.

endAngle · number · default: "0"

The end angle of the sector in degrees.

Appearance

cornerRadius · number · default: "0"

The radius of rounded corners in pixels.

forceCornerRadius · boolean · default: "false"

Whether to force rendering of rounded corners even when the angle of the sector is very small.

cornerIsExternal · boolean · default: "false"

Whether the corner radius is external to the sector.

className · string

CSS class name to apply to the sector element.

SVG properties

This component accepts all standard SVG path element properties including:

• fill - Fill color
• stroke - Stroke color
• strokeWidth - Stroke width
• opacity - Opacity value
• style - Inline styles

Events

onClick · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for click events on the sector.

onMouseDown · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mousedown events on the sector.

onMouseUp · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseup events on the sector.

onMouseMove · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mousemove events on the sector.

onMouseOver · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseover events on the sector.

onMouseOut · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseout events on the sector.

onMouseEnter · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseenter events on the sector.

onMouseLeave · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseleave events on the sector.

Examples

Pie slice

import { Sector } from 'recharts';

<Sector
  cx={200}
  cy={200}
  innerRadius={0}
  outerRadius={80}
  startAngle={0}
  endAngle={90}
  fill="#8884d8"
/>

Donut segment

import { Sector } from 'recharts';

<Sector
  cx={200}
  cy={200}
  innerRadius={60}
  outerRadius={80}
  startAngle={45}
  endAngle={135}
  fill="#82ca9d"
/>

Rounded corners

import { Sector } from 'recharts';

<Sector
  cx={200}
  cy={200}
  innerRadius={60}
  outerRadius={80}
  startAngle={0}
  endAngle={90}
  cornerRadius={5}
  fill="#ffc658"
/>