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


Line Path Annotations add a bit of text and a line coming from a point. They're useful for adding info to your graphs.

import { LinePathAnnotation } from '@vx/annotation';
// or
// import * as Annotation from '@vx/annotation'; 
// <Annotation.LinePathAnnotation />

const annotation = (
    label={'expected from deploy'}
      new Point({
        x: annotationPoint.x + (width / allData.length),
        y: annotationPoint.y - (height / allData.length),

image output


Name Default Type Description
top 0 number Margin on top
left 0 number Margin on left
points array Points describing the line path
stroke black string The color of the line
strokeWidth 1 number The pixel width of the line
className string The class name associated of the LinePath shape
label string The text for your label
labelAnchor left string The label's textAnchor
labelDx 0 number The x-coordinate shift to the label
labelDy 0 number The y-coordinate shift to the label
labelFill string The color of label. Defaults to the stroke color
labelFontSize 10 number The font size of the label text
labelStroke white string The color of the label
labelStrokeWidth 3 number The stroke width of the label text
labelPaintOrder stroke string The label's SVG paint-order.