@vx/annotation

Status

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

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),
      })
    ]}
  />
);

Properties