Vue 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.

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"}`)
      },
    },
  ]
}

API Reference

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

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

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