JavaScript ChartsContext MenuEnterprise

The context menu can be used to take less common and context-aware actions with the chart and nodes.

To enable these features, set contextMenu.enabled to true.

contextMenu: {
    enabled: true,
}

A user will now be able to use the context menu by right clicking anywhere on the chart, as in the following example.

Context Menu Default Example

Custom Actions

You can add extra actions to the context menu which can run any arbitrary function.

In the example below, there is one extra action called "Say hello" that will output the value at the datum if one was clicked, otherwise falling back to a default.

contextMenu: {
  extraActions: [
    {
      label: "Say hello",
      action: ({ datum, event }: AgContextMenuActionParams) => {
        console.log(`Hello ${datum?.value ?? "world"}`)
      },
    },
  ]
}

Context Menu Extra Actions Example

API Reference

interface AgContextMenuOptions {
  enabled?: boolean
  extraActions?: Array<AgContextMenuAction>
}

type AgContextMenuAction = {
  label: string
  action: (params: AgContextMenuActionParams) => void
}

type AgContextMenuActionParams = {
  datum?: any
  event: MouseEvent
}