TypeScript icon, indicating that this package has built-in type declarations

    2.5.0 • Public • Published


    SVG Annotations enable you to label points, thresholds, or regions of a visualization to provide additional context to for your chart consumer. This package is heavily inspired by Susie Lu's react-annotation library.

    Each annotation consists of three (optional) parts:

    1. Subject (CircleSubject, LineSubject, more 🔜) – what part of a chart is being annotated (point, line, region)

    2. Label – the text component for the annotation. Handles SVG text wrapping using @visx/text, and supports title and subtitle customization as well as vertical & horizontal anchors / alignment

    3. Connector – line connecting a subject and label

    The Annotation or EditableAnnotation component wrappers allow you to compose these components and simplify their individual positioning:

      dx={labelDx} // x offset of label from subject
      dy={labelDy} // y offset of label from subject
      onDragEnd={({ x, y, dx, dy }) => ...}
      <Connector />
      <CircleSubject />
      <Label title="Context about this point" subtitle="More deets">

    Components can also be used in isolation, in which case you must specify exact positions for each item:

    () => (
        <Connector x={subjectX} y={subjectY} dx={labelDx} dy={labelDy} />
        <CircleSubject x={subjectX} y={subjectY} />
        <Label x={subjectX + labelDx} y={subjectY + labelDy} title="...">
    ⚠️ ResizeObserver dependency

    The Label component relies on ResizeObservers for auto-sizing. If you need a polyfill, you can either polute the window object or inject it cleanly through props:

    import { ResizeObserver } from 'your-favorite-polyfill';
    function App() {
      return <Label resizeObserverPolyfill={ResizeObserver} {...} />


    npm install --save @visx/annotation


    npm i @visx/annotation

    DownloadsWeekly Downloads






    Unpacked Size

    92.4 kB

    Total Files


    Last publish


    • vx-hshoff
    • hshoff
    • christopher.card.williams
    • lencioni