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

# ReferenceDot

Draws a circle on the chart to highlight a specific point.

## Usage

```tsx theme={null}
import { LineChart, ReferenceDot } from 'recharts';

<LineChart data={data}>
  <ReferenceDot x="Page C" y={500} fill="red" />
</LineChart>
```

## Props

<ParamField path="x" type="number | string">
  The x-coordinate of the center of the dot.

  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceDot will internally calculate the correct pixel position.

  ```tsx theme={null}
  <ReferenceDot x="January" y="2026" />
  ```
</ParamField>

<ParamField path="y" type="number | string">
  The y-coordinate of the center of the dot.

  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceDot will internally calculate the correct pixel position.

  ```tsx theme={null}
  <ReferenceDot x="January" y="2026" />
  ```
</ParamField>

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

<ParamField path="fill" type="string" default="#fff">
  The fill color of the dot.
</ParamField>

<ParamField path="fillOpacity" type="number" default="1">
  The opacity of the fill.
</ParamField>

<ParamField path="stroke" type="string" default="#ccc">
  The stroke color of the dot.
</ParamField>

<ParamField path="strokeWidth" type="number | string" default="1">
  The width of the stroke.
</ParamField>

<ParamField path="label" type="boolean | string | number | object | ReactElement | function" default="false">
  Renders a single label.

  * `false`: no labels are rendered
  * `string` | `number`: the content of the label
  * `object`: the props of LabelList component
  * `ReactElement`: a custom label element
  * `function`: a render function of custom label
</ParamField>

<ParamField path="shape" type="ReactElement | function">
  If set a ReactElement, the shape of dot can be customized.
  If set a function, the function will be called to render customized shape.
</ParamField>

<ParamField path="ifOverflow" type="'discard' | 'hidden' | 'visible' | 'extendDomain'" default="discard">
  Defines how to draw the reference dot if it falls outside the chart area.

  * `discard`: don't render if outside
  * `hidden`: render but clip to chart area
  * `visible`: render even if outside
  * `extendDomain`: extend the axis domain to include the reference dot
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of x-axis which is corresponding to the data.
  Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of y-axis which is corresponding to the data.
  Required when there are multiple YAxes.
</ParamField>

<ParamField path="zIndex" type="number" default="600">
  Z-Index of this component and its children. The higher the value,
  the more on top it will be rendered.
  Components with higher zIndex will appear in front of components with lower zIndex.
  If undefined or 0, the content is rendered in the default layer without portals.

  @since 3.4
</ParamField>

<ParamField path="className" type="string | number">
  CSS class name for styling.
</ParamField>

### Event handlers

<ParamField path="onClick" type="function">
  The customized event handler of click in this chart.

  ```tsx theme={null}
  (dotProps: DotProps, e: React.MouseEvent<SVGCircleElement>) => void
  ```
</ParamField>

<ParamField path="onMouseDown" type="function">
  The customized event handler of mousedown in this chart.
</ParamField>

<ParamField path="onMouseUp" type="function">
  The customized event handler of mouseup in this chart.
</ParamField>

<ParamField path="onMouseOver" type="function">
  The customized event handler of mouseover in this chart.
</ParamField>

<ParamField path="onMouseOut" type="function">
  The customized event handler of mouseout in this chart.
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter in this chart.
</ParamField>

<ParamField path="onMouseMove" type="function">
  The customized event handler of mousemove in this chart.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave in this chart.
</ParamField>

## Notes

This component, unlike Dot or `<circle>`, is aware of the cartesian coordinate system,
so you specify its center by using data coordinates instead of pixels.

ReferenceDot will calculate the pixels based on the provided data coordinates.

If you prefer to render dots using pixels rather than data coordinates,
consider using the Dot component instead.

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/ReferenceDot.tsx`