Annotation Authoring (Ink)

The Ink layer turns annotations into direct-manipulation objects. With Ink enabled, point annotations become draggable, you can click to create new ones, and clicking any annotation opens a floating editor card to rename, recolor, embolden, resize, or delete it. Every edit is undoable when Rewind is enabled.

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.

When to use Ink

Use Ink when your users, not just your code, should place and adjust annotations: analyst callouts, review comments, marked levels on a financial chart. For annotations you set programmatically and never edit, plain annotations are enough. Pair Ink with the context menu so a right-click drops an editable note at the clicked point, and with Rewind so every edit is undoable. Try the Annotation authoring demo.

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