Skip to main content

Context menu

The context menu is a dialog that users access through a right-mouse-click or ellipsis menu (…).

Override context menu​

You can override the default items in the context menu in two ways:

info

Both approaches override all context menus. If you only want to override specific menus, you should implement your own filtering logic for that particular use case.

Using Widget Constructor​

You can register a custom function for overriding default items when the context menu is created. To do this, use the context_menu property of the Widget Constructor. context_menu has two properties:

  • items_processor allows you to modify the items displayed in the context menu. For example, you can provide a function that adds new items and removes or reorders existing ones. The library calls this function each time users want to display the context menu. This function should return an array of items to display.

  • renderer_factory allows you to override the default renderer for the context menu so you can adjust existing menu items.

tip

You can also use the context_menu property to retrieve a list of items in the menu. Check out the Widget Constructor tutorial on YouTube for an implementation example.

Examples​

The code sample below shows how to add a new item to the context menu using items_processor.

The code sample below shows how to adjust existing items of the context menu using renderer_factory.

Determine evoked menu​

Both items_processor and renderer_factory provide menu names and the associated IDs for items like series, drawings, indicators, orders, and positions. You can determine which menu was triggered using the properties of the CreateContextMenuParams interface.

Using API​

If you want to change the menu dynamically, use the onContextMenu method.

widget.onChartReady(function() {
    widget.onContextMenu(function(unixtime, price) {
        return [{
            position: "top",
            text: "First top menu item, time: " + unixtime + ", price: " + price,
            click: function() { alert("First item clicked."); }
        },
        { text: "-", position: "top" }, // Adds a separator between buttons
        { text: "-Paste" },             // Removes the existing item from the menu
        {
            position: "top",
            text: "Second top menu item 2",
            click: function() { alert("Second item clicked."); }
        }, {
            position: "bottom",
            text: "Bottom menu item",
            click: function() { alert("Third item clicked."); }
        }];
    });
});