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

# Dot

> API reference for the Recharts Dot component

Renders a circular dot marker in the chart.

This component accepts X and Y coordinates in pixels. If you need to position the dot based on your chart's data, consider using the [ReferenceDot](/api/reference/ReferenceDot) component instead.

## Props

### Positioning

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

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

<ParamField path="r" type="number | string">
  The radius of the dot in pixels.
</ParamField>

### Appearance

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

<ParamField path="clipDot" type="boolean">
  Whether the dot should be clipped to the chart area.
</ParamField>

### SVG properties

This component accepts all standard SVG circle element properties including:

* `fill` - Fill color
* `stroke` - Stroke color
* `strokeWidth` - Stroke width
* `opacity` - Opacity value
* `style` - Inline styles

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

## Examples

### Basic dot

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

<Dot
  cx={100}
  cy={100}
  r={5}
  fill="#8884d8"
/>
```

### Styled dot with stroke

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

<Dot
  cx={100}
  cy={100}
  r={6}
  fill="#fff"
  stroke="#8884d8"
  strokeWidth={2}
/>
```

### Interactive dot

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

<Dot
  cx={100}
  cy={100}
  r={5}
  fill="#82ca9d"
  onClick={(e) => console.log('Dot clicked')}
  onMouseEnter={(e) => console.log('Mouse entered')}
  style={{ cursor: 'pointer' }}
/>
```