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

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

Positioning

cx · number

The x-coordinate of the symbol center in pixels.

cy · number

The y-coordinate of the symbol center in pixels.

Size

size · number · default: "64"

The size of the symbol. The meaning depends on the sizeType prop.

sizeType · '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

Appearance

className · string

CSS class name to apply to the symbol 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

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

Static methods

registerSymbol

Symbols.registerSymbol(key: string, factory: D3SymbolType)

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

Examples

Basic symbols

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

import { Symbols } from 'recharts';

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

Custom symbol registration

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