@vx/annotation

npm install --save @vx/annotation

LinePathAnnotation

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 = (
  <LinePathAnnotation
    label={'expected from deploy'}
    stroke={'white'}
    labelFill={'white'}
    labelStroke={'none'}
    labelStrokeWidth={2}
    points={[
      annotationPoint,
      new Point({
        x: annotationPoint.x + (width / allData.length),
        y: annotationPoint.y - (height / allData.length),
      })
    ]}
  />
);

image output

Properties

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.