API

Charts

General Components

Cartesian Components

Polar Components

Shapes

ReferenceArea

Draws a rectangular area on the chart to highlight a specific range.

This component, unlike Rectangle or rect, is aware of the cartesian coordinate system, so you specify the area by using data coordinates instead of pixels.

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

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

Parent Components

ReferenceArea consumes context provided by these components:

Child Components

ReferenceArea provides context for these components:

Props

  • 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 7 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 label element
    • function: a render function of custom label

    DEFAULT: false

    Examples:

  • radius[number, number, number, number] | numberoptional

    The radius of corners.

    If you provide a single number, it applies to all four corners. If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.

    DEFAULT: 0

    Examples:

  • shapeFunction | ReactNodeoptional

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

  • x1number | stringoptional

    Starting X-coordinate of the area. This value is using your chart's domain, so you will provide a data value instead of a pixel value. ReferenceArea will internally calculate the correct pixel position.

    If undefined then the area will extend to the left edge of the chart plot area.

    FORMAT: 

    <ReferenceArea x1="Monday" x2="Friday" />
<ReferenceArea x1={10} x2={50} />
<ReferenceArea x1="Page C" />

  • x2number | stringoptional

    Ending X-coordinate of the area. This value is using your chart's domain, so you will provide a data value instead of a pixel value. ReferenceArea will internally calculate the correct pixel position.

    If undefined then the area will extend to the right edge of the chart plot area.

    FORMAT: 

    <ReferenceArea x1="Monday" x2="Friday" />
<ReferenceArea x1={10} x2={50} />
<ReferenceArea x2="Page C" />

  • xAxisIdnumber | stringoptional

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

    DEFAULT: 0

  • y1number | stringoptional

    Starting Y-coordinate of the area. This value is using your chart's domain, so you will provide a data value instead of a pixel value. ReferenceArea will internally calculate the correct pixel position.

    If undefined then the area will extend to the top edge of the chart plot area.

    FORMAT: 

    <ReferenceArea y1={100} y2={500} />
<ReferenceArea y1="low" y2="high" />
<ReferenceArea y1={200} />

  • y2number | stringoptional

    Ending Y-coordinate of the area. This value is using your chart's domain, so you will provide a data value instead of a pixel value. ReferenceArea will internally calculate the correct pixel position.

    If undefined then the area will extend to the bottom edge of the chart plot area.

    FORMAT: 

    <ReferenceArea y1={100} y2={500} />
<ReferenceArea y1="low" y2="high" />
<ReferenceArea y2={400} />

  • yAxisIdnumber | stringoptional

    The id of YAxis 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.

    DEFAULT: 100

    Examples:

  • onClickReact.MouseEventHandler<T>optional

    The customized event handler of click on the rectangle

  • onMouseDownReact.MouseEventHandler<T>optional

    The customized event handler of mousedown on the rectangle

  • onMouseEnterReact.MouseEventHandler<T>optional

    The customized event handler of mouseenter on the rectangle

  • onMouseLeaveReact.MouseEventHandler<T>optional

    The customized event handler of mouseleave on the rectangle

  • onMouseMoveReact.MouseEventHandler<T>optional

    The customized event handler of mousemove on the rectangle

  • onMouseOutReact.MouseEventHandler<T>optional

    The customized event handler of mouseout on the rectangle

  • onMouseOverReact.MouseEventHandler<T>optional

    The customized event handler of mouseover on the rectangle

  • onMouseUpReact.MouseEventHandler<T>optional

    The customized event handler of mouseup on the rectangle