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

# Symbols

> API reference for the Recharts Symbols component

Renders a symbol from a set of predefined shapes based on D3 symbol types.

The Symbols component provides various geometric shapes that can be used as markers in charts. Shapes include circles, squares, diamonds, triangles, stars, and more.

## Props

### Shape

<ParamField path="type" type="SymbolType" default="circle">
  The type of symbol to render. Options:

  * `'circle'` - Circle
  * `'cross'` - Cross/plus sign
  * `'diamond'` - Diamond
  * `'square'` - Square
  * `'star'` - Five-pointed star
  * `'triangle'` - Triangle
  * `'wye'` - Y-shape
</ParamField>

### Positioning

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

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

### Size

<ParamField path="size" type="number" default="64">
  The size of the symbol. The meaning depends on the `sizeType` prop.
</ParamField>

<ParamField path="sizeType" type="'area' | 'diameter'" default="area">
  How to interpret the `size` prop:

  * `'area'` - Size represents the area in square pixels
  * `'diameter'` - Size represents the diameter/width in pixels
</ParamField>

### Appearance

<ParamField path="className" type="string">
  CSS class name to apply to the symbol 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

All SVG path event handlers are also supported (onClick, onMouseEnter, etc.).

## Static methods

### registerSymbol

```tsx theme={null}
Symbols.registerSymbol(key: string, factory: D3SymbolType)
```

Registers a custom D3 symbol type for use with the Symbols component.

## Examples

### Basic symbols

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

<Symbols
  type="circle"
  cx={100}
  cy={100}
  size={64}
  fill="#8884d8"
/>

<Symbols
  type="star"
  cx={150}
  cy={100}
  size={64}
  fill="#82ca9d"
/>
```

### Symbol with diameter size

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

<Symbols
  type="diamond"
  cx={100}
  cy={100}
  size={20}
  sizeType="diameter"
  fill="#ffc658"
  stroke="#ff8042"
  strokeWidth={2}
/>
```

### Custom symbol registration

```tsx theme={null}
import { Symbols } from 'recharts';
import { symbolTriangle } from 'd3-shape';

// Register a custom symbol
Symbols.registerSymbol('customTriangle', symbolTriangle);

<Symbols
  type="customTriangle"
  cx={100}
  cy={100}
  size={64}
  fill="#8884d8"
/>
```