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

# 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

<ParamField path="x" type="number" default="0">
  The x-coordinate of the vertical line of the cross in pixels.
</ParamField>

<ParamField path="y" type="number" default="0">
  The y-coordinate of the horizontal line of the cross in pixels.
</ParamField>

<ParamField path="width" type="number" default="0">
  Width of the cross (horizontal line length) in pixels.
</ParamField>

<ParamField path="height" type="number" default="0">
  Height of the cross (vertical line length) in pixels.
</ParamField>

<ParamField path="top" type="number" default="0">
  The y-coordinate of the top left point in the boundary box of the cross.
</ParamField>

<ParamField path="left" type="number" default="0">
  The x-coordinate of the top left point in the boundary box of the cross.
</ParamField>

### Appearance

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

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

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

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

### Crosshair indicator

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

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