We recommend using react-annotation by @susielu. This package is a work in progress. In the future we may make some helpers built on top of react-annotation.


npm install --save @vx/annotation



#<LinePathAnnotation />

# LinePathAnnotation.classNamestring | undefinedoptional

Add a class name to the line path.

# LinePathAnnotation.labelstring | undefinedoptional

The text for your label.

# LinePathAnnotation.labelAnchor"end" | "start" | "middle" | undefinedoptional

The label's textAnchor.

Default middle

# LinePathAnnotation.labelDxnumber | undefinedoptional

The x-coordinate shift to the label.

Default 0

# LinePathAnnotation.labelDynumber | undefinedoptional

The y-coordinate shift to the label

Default 0

# LinePathAnnotation.labelFillstring | undefinedoptional

The color of label. Defaults to props.stroke.

# LinePathAnnotation.labelFontSizenumber | undefinedoptional

The font size of the label text.

Default 10

# LinePathAnnotation.labelPaintOrderstring | undefinedoptional

The label's SVG paint-order.

Default stroke

# LinePathAnnotation.labelStrokestring | undefinedoptional

The color of the label.

Default white

# LinePathAnnotation.labelStrokeWidthnumber | undefinedoptional

The stroke width of the label text.

Default 3

# LinePathAnnotation.leftnumber | undefinedoptional

A left pixel offset applied to the entire bar group.

Default 0

# LinePathAnnotation.points(Point | SimplePoint)[] | undefinedoptional

An array of points describing the line path.

Default []

# LinePathAnnotation.strokestring | undefinedoptional

The color of the line.

Default black

# LinePathAnnotation.strokeWidthnumber | undefinedoptional

The pixel width of the line.

Default 1

# LinePathAnnotation.topnumber | undefinedoptional

A top pixel offset applied to the entire bar group.

Default 0