Home > Docs > chart.contextMenu

chart.contextMenu

Configuration Structure

chart: {
  contextMenu: { ... },
    enabled: boolean,
    items: Array,
    labels: { ... },
      annotate: string,
      xline: string,
      yline: string,
      measure: string,
    noteText: string,
    line: { ... },
      text: string,
      strokeDashArray: number,
      color: string,
}

The contextMenu options add a right-click / long-press menu whose actions act at the exact clicked point rather than chart-wide. It needs the context-menu feature (import 'apexcharts/features/context-menu'). Built-in annotate / xline / yline items become ink-managed (they open the floating editor and undo via Rewind) when the ink feature is bundled. See the Context menu guide. It is part of the chart configuration.

enabled

chart.contextMenu.enabled
Default: false

Enable the context menu. Requires import 'apexcharts/features/context-menu'.

items

chart.contextMenu.items

Ordered array of menu items. Entries can be built-in ids ('annotate', 'xline', 'yline', 'measure') or a custom object:

{
  id: 'copy',
  label: 'Copy value',
  icon: '<svg>...</svg>',
  onClick: (chart, { x, y, seriesIndex, dataPointIndex, clientX, clientY }) => { /* ... */ },
}

The measure item shows only when the measure tool is enabled. Defaults to ['annotate', 'xline', 'yline', 'measure'].

labels

chart.contextMenu.labels

Override the built-in item labels: { annotate, xline, yline, measure }.

noteText

chart.contextMenu.noteText
Default: 'Note'

Text of the annotation dropped by the built-in annotate item.

line

chart.contextMenu.line

Shared styling for the built-in xline (vertical at the clicked x) and yline (horizontal at the clicked y) items: { text, strokeDashArray, color }. These draw lines only, never a range rectangle. With the ink feature bundled the line opens the floating editor and is draggable and undoable.

id

Identifier for a custom menu entry. Built-in entries are named by their string id instead ('annotate', 'xline', 'yline', 'measure'); this is only for the object form.

label

Text shown for a custom entry in the menu.

icon

SVG string rendered as the entry's icon.

onClick

Called when a custom entry is chosen. Receives the chart and the click context: the data coordinates x and y, the seriesIndex and dataPointIndex under the pointer (either may be null when the click was not on a point), and the raw clientX / clientY.

onClick: function(chart, { x, y, seriesIndex, dataPointIndex, clientX, clientY }) { // ... }

annotate

chart.contextMenu.labels.annotate

Overrides the label of the built-in annotate item, which drops a note at the clicked point.

xline

chart.contextMenu.labels.xline

Overrides the label of the built-in xline item, a vertical line at the clicked x. Defaults to "Annotate here".

yline

chart.contextMenu.labels.yline

Overrides the label of the built-in yline item, a horizontal line at the clicked y. Defaults to "Mark this level".

measure

chart.contextMenu.labels.measure

Overrides the label of the built-in measure item, which arms the measure ruler.

text

chart.contextMenu.line.text

Label drawn on the line. Defaults to '', which draws no label.

strokeDashArray

chart.contextMenu.line.strokeDashArray
Default: 4

Dash pattern of the line. Defaults to 4.

color

chart.contextMenu.line.color

Line color. Omit to keep the annotation default.