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
The x-coordinate of the center in pixels.
The y-coordinate of the center in pixels.
The radius of the dot in pixels.
Appearance
CSS class name to apply to the dot element.
Whether the dot should be clipped to the chart area.
SVG properties
This component accepts all standard SVG circle element properties including:
fill - Fill colorstroke - Stroke colorstrokeWidth - Stroke widthopacity - Opacity valuestyle - 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' }}
/>