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

Add a class name to the line path.

# LinePathAnnotation.labelstringoptional

The text for your label.

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

The label's textAnchor.

Default middle

# LinePathAnnotation.labelDxnumberoptional

The x-coordinate shift to the label.

Default 0

# LinePathAnnotation.labelDynumberoptional

The y-coordinate shift to the label

Default 0

# LinePathAnnotation.labelFillstringoptional

The color of label. Defaults to props.stroke.

# LinePathAnnotation.labelFontSizenumberoptional

The font size of the label text.

Default 10

# LinePathAnnotation.labelPaintOrderstringoptional

The label's SVG paint-order.

Default stroke

# LinePathAnnotation.labelStrokestringoptional

The color of the label.

Default white

# LinePathAnnotation.labelStrokeWidthnumberoptional

The stroke width of the label text.

Default 3

# LinePathAnnotation.leftnumberoptional

A left pixel offset applied to the entire bar group.

Default 0

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

An array of points describing the line path.

Default []

# LinePathAnnotation.strokestringoptional

The color of the line.

Default black

# LinePathAnnotation.strokeWidthnumberoptional

The pixel width of the line.

Default 1

# LinePathAnnotation.topnumberoptional

A top pixel offset applied to the entire bar group.

Default 0