ReferenceDot

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

Usage

import { LineChart, ReferenceDot } from 'recharts';

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

Props

x · 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.

<ReferenceDot x="January" y="2026" />

y · 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.

<ReferenceDot x="January" y="2026" />

r · number · default: "10"

The radius of the dot in pixels.

fill · string · default: "#fff"

The fill color of the dot.

fillOpacity · number · default: "1"

The opacity of the fill.

stroke · string · default: "#ccc"

The stroke color of the dot.

strokeWidth · number | string · default: "1"

The width of the stroke.

label · 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

shape · 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.

ifOverflow · '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

xAxisId · string | number · default: "0"

The id of x-axis which is corresponding to the data. Required when there are multiple XAxes.

yAxisId · string | number · default: "0"

The id of y-axis which is corresponding to the data. Required when there are multiple YAxes.

zIndex · 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

className · string | number

CSS class name for styling.

Event handlers

onClick · function

The customized event handler of click in this chart.

(dotProps: DotProps, e: React.MouseEvent<SVGCircleElement>) => void

onMouseDown · function

The customized event handler of mousedown in this chart.

onMouseUp · function

The customized event handler of mouseup in this chart.

onMouseOver · function

The customized event handler of mouseover in this chart.

onMouseOut · function

The customized event handler of mouseout in this chart.

onMouseEnter · function

The customized event handler of mouseenter in this chart.

onMouseMove · function

The customized event handler of mousemove in this chart.

onMouseLeave · function

The customized event handler of mouseleave in this chart.

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