ReferenceLine

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

  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

  Examples:

  • Reference elements with a label
  • Stacked Bar Chart with Horizontal Line
  • Area Responsive Container

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

  DEFAULT: "middle"

• segment[{ x?: XValueType | undefined; y?: YValueType | undefined; }, { x?: XValueType | undefined; y?: YValueType | undefined; }]optional

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

  Examples:

  • Compare Two Lines

• shapeFunction | ReactNodeoptional

• strokeWidthnumber | stringoptional

  The width of the stroke

  DEFAULT: 1

  Examples:

  • Line Chart Negative Values With Reference Lines
  • Compare Two Lines
  • Stacked Bar Chart with Horizontal Line

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

  FORMAT:

  <ReferenceLine x="Monday" />

  Examples:

  • Line Chart With Reference Lines
  • Line Chart Negative Values With Reference Lines
  • Area Responsive Container

• xAxisIdnumber | stringoptional

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

  DEFAULT: 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.

  FORMAT:

  <ReferenceLine y="Page D" />

  Examples:

  • Line Chart With Reference Lines
  • Line Chart Negative Values With Reference Lines
  • Positive and Negative Bar Chart
  • Brush Bar Chart
  • Bar Chart Stacked By Sign
  • Stacked Bar Chart with Horizontal Line
  • Area Responsive Container

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

  DEFAULT: 400

  Examples:

  • Z-Index and layers guide