API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

ReferenceLine

Draws a line on the chart connecting two points.

This component, unlike line, is aware of the cartesian coordinate system, so you specify the dimensions by using data coordinates instead of pixels.

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

If you prefer to render using pixels rather than data coordinates, consider using the line SVG element instead.

相关链接

父组件

ReferenceLine consumes context provided by these components:

子组件

ReferenceLine provides context for these components:

Props

  • 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

    默认值："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

    默认值：false

    示例：

  • position"end" | "middle" | "start"optional

    The position of the reference line when the axis has bandwidth (e.g., a band scale). This determines where within the band the line is drawn.

    默认值："middle"

  • segmentreadonly [ { x?: number | string; y?: number | string; }, { x?: number | string; y?: number | string; }, ]optional

    Tuple of coordinates. If defined, renders a diagonal line segment.

  • shapeFunction | ReactNodeoptional

  • strokeWidthnumber | stringoptional

    The width of the stroke

    默认值：1

  • xnumber | stringoptional

    If defined, renders a vertical line on this position.

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

    格式：

    <ReferenceLine x="Monday" />

  • xAxisIdnumber | stringoptional

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

    默认值：0

  • ynumber | stringoptional

    If defined, renders a horizontal line on this position.

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

    格式：

    <ReferenceLine y="Page D" />

    示例：

  • yAxisIdnumber | stringoptional

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

    默认值：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.

    默认值：400

    示例：