Direct-Manipulation Annotations: Ink and Measure

For most of its life an ApexCharts annotation was something you declared in config and the reader looked at. ApexCharts 6.0 makes annotations something the reader authors. Ink makes them draggable and editable directly on the plot, and writes their positions back to data coordinates so they stay put. Measure adds a ruler for reading any move on the chart. With Rewind wired in for undo, the chart becomes a surface you mark up, not just a picture.

This post covers both features, how Ink keeps annotations glued to the data, the two Measure modes, and how undo ties it together.

Key takeaways

• Ink makes annotations authorable: drag a note, click it to open an inline editor, or drop a new one from the palette by clicking the plot.
• Positions are written back to data coordinates. On release, Ink converts pixels to annotations.points[].x/y, so notes stay glued through zoom and resize and become part of the chart's state.
• Measure is a ruler. chart.startMeasure() then drag A to B for the change, percent change, and range; span mode snaps to the line, free mode measures a diagonal.
• Rewind ties it together. With chart.history.enabled, Ctrl/Cmd+Z undoes any drag, edit, or measure.
• All opt-in: import 'apexcharts/features/ink', .../measure, and .../history.

See it live

The Peak and Watch callouts below are draggable. Grab one and move it; its new position is written back to the annotation in data coordinates. Click a note to open its editor, or use the + Note palette to drop a new one. Click Measure and drag across the chart to read a move, then Undo to reverse the last action.

Ink: annotations you can move

Turn Ink on and your existing annotations become interactive. No new annotation API is required; Ink upgrades what you already declared.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/ink'
import 'apexcharts/features/history' // optional: enables undo/redo

const chart = new ApexCharts(el, {
  series: [{ name: 'Signal', data: signal }],
  chart: {
    type: 'line',
    ink: { enabled: true, palette: true }, // palette shows the "+ Note" tool
    history: { enabled: true },
  },
  annotations: {
    points: [
      { x: 6, y: 74, id: 'peak', label: { text: 'Peak' } },
      { x: 20, y: 52, id: 'watch', label: { text: 'Watch' } },
    ],
  },
})
chart.render()

Three interactions come with that:

Action	How	Result
Move a note	Drag a labelled point	New position written to annotations.points[].x/y
Edit a note	Click it to open the floating editor	Rename, recolor, resize the marker, or delete
Create a note	Click + Note, then click the plot	A new editable, draggable annotation is dropped

Why writing back to data coordinates matters

This is the detail that makes Ink trustworthy. When you drop or drag a note, the obvious implementation would store its pixel position. That breaks the moment the reader zooms or the container resizes, because the pixel that meant "the March peak" now points somewhere else. Ink instead converts the release position back to a data coordinate (x, y in your series' units) and writes it to annotations.points. The note is now anchored to the data, so it tracks the peak through every zoom and reflow, and because it lives in the options, it is part of any state you serialize.

Ink fires events so your app can react or persist:

chart.addEventListener('annotationDragged', (c, o) => {
  // o: { id, x, y } in data coordinates
  save(o.id, o.x, o.y)
})
// also: annotationCreated, annotationEdited, annotationStyled, annotationDeleted

Pin a specific annotation against editing with draggable: false on that annotation.

Measure: a ruler for any move

Measure answers "how big was that move?" without a calculator. Enable it, start it, and drag:

import 'apexcharts/features/measure'

const chart = new ApexCharts(el, {
  chart: {
    type: 'line',
    measure: { enabled: true, mode: 'span', pinOnRelease: true },
  },
})

// from a button, or hold the `m` key with measure.enabled
chart.startMeasure()
// chart.stopMeasure()
// chart.clearMeasures()

Drag from A to B and a shaded band reports the change (dy), the percent change, and the range. The measured event gives you the numbers:

chart.addEventListener('measured', (c, o) => {
  // o: { dx, dy, percentChange }
  console.log(`${o.dy} (${o.percentChange.toFixed(1)}%)`)
})

Two modes, for two questions:

Mode	Endpoints	Use it for
span (default)	Snap to the series line	"How much did this metric move between these two times?" (finance-style)
free	Any two points you drag between	A diagonal measurement anywhere on the plot

With pinOnRelease: true, releasing pins the ruler; because it is stored in data coordinates it stays glued through zoom and resize, just like an Ink annotation. chart.clearMeasures() removes pinned rulers.

Undo, via Rewind

Direct manipulation needs a safety net, and that is Rewind. With chart.history.enabled, every Ink edit and every measure is a history step:

chart.history.undo() // reverse the last drag / edit / measure
chart.history.redo()

Keyboard works out of the box: Ctrl/Cmd+Z undoes, Shift+Ctrl/Cmd+Z redoes. Because Rewind coalesces rapid changes, a single drag is one undo step, not one per pixel. See the undo/redo guide for the full history API.

When to use these

Reach for Ink and Measure when the reader is meant to work with the chart, not just read it: annotating a report before sharing it, marking anomalies in a monitoring view, measuring a move in a trading or analytics tool, or any "let me point at this" moment. For annotations that are fixed and authored by you at build time, plain annotations without Ink are enough; add Ink only when the reader should move or create them.

Summary

Ink and Measure move authoring onto the chart. Ink makes annotations draggable, editable, and creatable in place, and writes their positions back to data coordinates so they stay anchored and serializable. Measure is a ruler that reports the change, percent change, and range of any move, in a line-snapping span mode or a free diagonal. Rewind makes all of it undoable. Import apexcharts/features/ink and .../measure (and .../history for undo), and see the annotation authoring guide and Measure ruler guide for the full reference. These are the on-chart authoring features of ApexCharts 6.0.

Frequently asked questions