Annotation Authoring (Ink)

Ordinary annotations are something you place in code: you compute a coordinate, set a label, and the note sits there. Ink flips that around and hands the pen to the user. With Ink enabled, annotations become direct-manipulation objects: point notes are draggable, a click on empty plot can create a new one, and clicking any annotation opens a floating editor to rename, recolor, embolden, resize, or delete it. Every change is written back to annotations.points in data coordinates, so what the user draws is real chart state you can read and save, not a throwaway overlay.

See it live

The demo below has Ink on. Drag the Peak or Watch callout and its new position is written back to the config in data coordinates. Right-click the plot and choose Add note here to drop an editable note at that exact point, then click any note to reopen its editor. (The same demo also shows Measure, the context menu, and Rewind undo, since they are designed to work together.)

For a walkthrough of the authoring model and how it pairs with Measure, see Direct-Manipulation Annotations: Ink and Measure.

Where Ink is useful

• Analyst callouts. Let a user mark a spike, a breakout, or an inflection on a live dashboard instead of hard-coding the note.
• Review and collaboration. Reviewers drop comments directly on the chart; you persist them from the Ink events.
• Marked levels on financial charts. Drag a support or resistance note and read its exact price back from annotations.points.
• Presentation and teaching. Add and restyle notes on the fly while walking an audience through the data.

For notes you set programmatically and never edit, plain annotations are enough; Ink is for when placement and editing are part of the user's workflow.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/ink'

const options = {
  chart: {
    ink: { enabled: true, palette: true, snap: true },
  },
}

See the chart.ink options for every field. You can also opt a single annotation in or out with annotations.points[].draggable.

What you can do

• Drag any point annotation (unless it sets draggable: false).
• Create by turning on palette: true: a minimal "add note" tool arms create mode, and the next click on the plot drops an editable annotation.
• Snap dragged points and axis-line annotations to the nearest gridline with snap: true.
• Edit through the floating card: rename inline, recolor via accent swatches, toggle bold, step the font size, resize or reshape the marker, or delete. Axis-line annotations get separate Label and Line color rows, so restyling the label chip never touches the stroke.

Events

Ink fires dedicated events so you can persist edits:

annotationDragged	A point or line annotation was moved.
annotationEdited	Text or position was changed.
annotationStyled	Color, weight, font size, or marker was changed.
annotationDeleted	An annotation was removed.

Pairs well with

Ink is designed to sit alongside three related features: the context menu so a right-click drops an editable note at the clicked point, Rewind so every drag, restyle, and delete is undoable, and Measure for reading the change between two points. Try the Annotation authoring demo.

Ink ships as a tree-shakeable entry point; see the tree-shaking guide.