> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<ParamField path="cx" type="number" default="0">
  The x-coordinate of the center point in pixels.
</ParamField>

<ParamField path="cy" type="number" default="0">
  The y-coordinate of the center point in pixels.
</ParamField>

<ParamField path="innerRadius" type="number" default="0">
  The inner radius of the sector in pixels. Set to 0 for a pie slice without a hole.
</ParamField>

<ParamField path="outerRadius" type="number" default="0">
  The outer radius of the sector in pixels.
</ParamField>

### Angles

<ParamField path="startAngle" type="number" default="0">
  The start angle of the sector in degrees. 0 degrees is at the 3 o'clock position.
</ParamField>

<ParamField path="endAngle" type="number" default="0">
  The end angle of the sector in degrees.
</ParamField>

### Appearance

<ParamField path="cornerRadius" type="number" default="0">
  The radius of rounded corners in pixels.
</ParamField>

<ParamField path="forceCornerRadius" type="boolean" default="false">
  Whether to force rendering of rounded corners even when the angle of the sector is very small.
</ParamField>

<ParamField path="cornerIsExternal" type="boolean" default="false">
  Whether the corner radius is external to the sector.
</ParamField>

<ParamField path="className" type="string">
  CSS class name to apply to the sector element.
</ParamField>

### 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

<ParamField path="onClick" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for click events on the sector.
</ParamField>

<ParamField path="onMouseDown" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mousedown events on the sector.
</ParamField>

<ParamField path="onMouseUp" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseup events on the sector.
</ParamField>

<ParamField path="onMouseMove" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mousemove events on the sector.
</ParamField>

<ParamField path="onMouseOver" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseover events on the sector.
</ParamField>

<ParamField path="onMouseOut" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseout events on the sector.
</ParamField>

<ParamField path="onMouseEnter" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseenter events on the sector.
</ParamField>

<ParamField path="onMouseLeave" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseleave events on the sector.
</ParamField>

## Examples

### Pie slice

```tsx theme={null}
import { Sector } from 'recharts';

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

### Donut segment

```tsx theme={null}
import { Sector } from 'recharts';

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

### Rounded corners

```tsx theme={null}
import { Sector } from 'recharts';

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