# Line Annotation

## Content

A line annotation displays a single straight line on the page. When opened, the annotation displays a pop-up window containing the associated note.
![Line-Annotation.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Line-Annotation-20260424.063831.png?width=720)
Use the [LineAnnotation](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/LineAnnotation) class to add line annotations to a PDF document.

>type=note
> **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

```javascript
const doc = new PdfDocument();
const page = doc.newPage();

const rc = { x: 50, y: 50, width: 250, height: 50 };
const layout = new Layout({
    runs: [{
        text: "A line annotation is drawn around this note which illustates the effect of including " +
            "leader lines and caption in a line annotation",
        font: Font.getPdfFont(StandardPdfFont.Times),
        fontSize: 11
    }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//Create and add LineAnnotation using 'json' syntax
page.annotations.add({
    type: 'line',
    userName: 'Jaime Smith',
    start: { x: rc.x, y: rc.y + rc.height },
    end: { x: rc.x + rc.width, y: rc.y + rc.height },
    lineWidth: 3,
    color: "Red",
    leaderLinesLength: -15,
    leaderLinesExtension: 5,
    leaderLineOffset: 10,
    contents: "Line annotation",
    verticalTextOffset: -20,
    textPosition: LineAnnotationTextPosition.Inline,
})


const docData = doc.savePdf();
Util.saveFile("LineAnnotation.pdf", docData);
```