API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

ReferenceDot

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

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.

Parent Components

ReferenceDot consumes context provided by these components:

Child Components

ReferenceDot provides context for these components:

  • childrenReactNodeoptional

  • classNamestringoptional

  • ifOverflow"discard" | "extendDomain" | "hidden" | "visible"optional

    Defines how to draw this component if it falls partly outside the canvas:

    • discard: the whole component will not be drawn at all
    • hidden: the component will be clipped to the chart plot area
    • visible: the component will be drawn completely
    • extendDomain: the domain of the overflown axis will be extended such that the whole component fits into the plot area

    DEFAULT: "discard"

  • label(union of 6 variants)optional

    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 SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
    • function: a render function of custom label

    DEFAULT: false

  • rnumber | stringoptional

    The radius of dot.

    DEFAULT: 10

  • shapeFunction | ReactNodeoptional

    If set a ReactElement, the shape of dot can be customized. If set a function, the function will be called to render customized shape.

  • xnumber | stringoptional

    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.

    FORMAT: 

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

  • xAxisIdnumber | stringoptional

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

    DEFAULT: 0

  • ynumber | stringoptional

    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.

    FORMAT: 

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

  • yAxisIdnumber | stringoptional

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

    DEFAULT: 0

  • zIndexnumberoptional

    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.

    Available since Recharts 3.4

    DEFAULT: 600

    Examples: