Cross

API reference for the Recharts Cross component

Renders a cross shape (plus sign) formed by intersecting horizontal and vertical lines.

The Cross component is useful for marking specific points or creating crosshair indicators in charts.

Props

Positioning

x · number · default: "0"

The x-coordinate of the vertical line of the cross in pixels.

y · number · default: "0"

The y-coordinate of the horizontal line of the cross in pixels.

width · number · default: "0"

Width of the cross (horizontal line length) in pixels.

height · number · default: "0"

Height of the cross (vertical line length) in pixels.

top · number · default: "0"

The y-coordinate of the top left point in the boundary box of the cross.

left · number · default: "0"

The x-coordinate of the top left point in the boundary box of the cross.

Appearance

className · number

CSS class name to apply to the cross element.

SVG properties

This component accepts all standard SVG path element properties including:

• stroke - Line color
• strokeWidth - Line width
• opacity - Opacity value
• style - Inline styles

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

Examples

Basic cross

import { Cross } from 'recharts';

<Cross
  x={100}
  y={100}
  width={20}
  height={20}
  top={90}
  left={90}
  stroke="#8884d8"
  strokeWidth={2}
/>

Crosshair indicator

import { Cross } from 'recharts';

<Cross
  x={150}
  y={200}
  width={30}
  height={30}
  top={185}
  left={135}
  stroke="#ff0000"
  strokeWidth={1}
  opacity={0.7}
/>