Context Menu

The context menu (Radial Actions) gives a chart a right-click or long-press menu whose verbs act at the exact clicked point rather than chart-wide. Each action receives the data coordinates under the cursor, so "annotate here" or "mark this level" land where the user clicked.

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:

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

When to use it

Add a context menu when point-level actions are part of the workflow: annotating a spike, marking a threshold, copying a value, or starting a measurement exactly where the user is looking.

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