Sector - Recharts

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

number

default:"0"

The x-coordinate of the center point in pixels.

number

default:"0"

The y-coordinate of the center point in pixels.

number

default:"0"

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

number

default:"0"

The outer radius of the sector in pixels.

Angles

number

default:"0"

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

number

default:"0"

The end angle of the sector in degrees.

Appearance

number

default:"0"

The radius of rounded corners in pixels.

boolean

default:"false"

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

boolean

default:"false"

Whether the corner radius is external to the sector.

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

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

Event handler for click events on the sector.

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

Event handler for mousedown events on the sector.

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

Event handler for mouseup events on the sector.

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

Event handler for mousemove events on the sector.

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

Event handler for mouseover events on the sector.

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

Event handler for mouseout events on the sector.

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

Event handler for mouseenter events on the sector.

(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"
/>

⌘I