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 component instead.

Props

Positioning

cx · number

The x-coordinate of the center in pixels.

cy · number

The y-coordinate of the center in pixels.

r · number | string

The radius of the dot in pixels.

Appearance

className · string

CSS class name to apply to the dot element.

clipDot · boolean

Whether the dot should be clipped to the chart area.

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

import { Dot } from 'recharts';

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

Styled dot with stroke

import { Dot } from 'recharts';

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

Interactive dot

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' }}
/>