Context Menu

A chart's usual controls, the zoom and export buttons in the toolbar, act on the whole chart. But a lot of what people want to do is local: annotate this spike, draw a line at this level, measure from this point. The context menu gives the chart a right-click (or long-press) menu whose verbs act at the exact point under the cursor. Every action is handed the data coordinates where the click landed, so "annotate here" or "mark this level" happen where the user is actually looking, not at some chart-wide default.

See it live

Right-click anywhere on the chart below to open its context menu, then choose Add note here to drop an editable annotation at that point, or Measure from here to start a measurement there. (The menu's verbs are wired to Ink and Measure, which the same demo also shows.)

Drag a labelled point, right-click to add a note, or Measure across the chart.

Right-click the chart to open the context menu, then choose Add note here.

The Peak and Watch callouts are draggable (Ink); grab one and move it, and its new position is written back to annotations.points in data coordinates. Right-click anywhere on the chart to open the context menu and choose Add note here, which drops an editable note at that exact point; click any note to reopen its editor. Turn on Measure and drag to read a move; Undo reverses the last drag, edit, or measure via Rewind.

The context menu appears alongside Ink and Measure in the walkthrough at Direct-Manipulation Annotations: Ink and Measure.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/context-menu'

const options = {
  chart: {
    contextMenu: {
      enabled: true,
      items: ['annotate', 'xline', 'yline', 'measure'],
    },
  },
}

See the chart.contextMenu options for every field.

Built-in items

`annotate`	Drop a note at the clicked point.
`xline`	A vertical line at the clicked x.
`yline`	A horizontal line at the clicked y.
`measure`	Start a measurement; shown only when the measure tool is enabled.

When the Ink feature is bundled, the annotate, xline, and yline items become ink-managed: they open the floating editor and are undoable via Rewind.

Custom items

Add your own verbs alongside the built-ins. Each onClick receives the chart and the clicked context, so a custom action knows exactly where it was invoked:

const options = {
  chart: {
    contextMenu: {
      enabled: true,
      items: [
        'annotate',
        {
          id: 'copy',
          label: 'Copy value',
          onClick: (chart, { x, y, seriesIndex, dataPointIndex }) => {
            navigator.clipboard.writeText(String(y))
          },
        },
      ],
    },
  },
}

Where it is useful

Point-level annotation. Right-click a spike and annotate it, or drop a reference line at the clicked level.
Copying and inspecting values. A "copy value" or "inspect point" verb that reads the coordinates under the cursor.
Starting a measurement. Begin a measurement exactly where the user clicked.
Domain verbs. Your own actions ("create alert at this level", "open the record for this point") that need the clicked coordinates to do their job.

The context menu ships as a tree-shakeable entry point; see the tree-shaking guide.