AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Context Menu

Overview

A context menu (also called contextual, shortcut, and popup or pop-up menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. Usually the available choices are actions related to the selected object. From a technical point of view, such a context menu is a graphical control element.

Modules

The context menu requires the Common UI module:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>

Also, you should reference the anychart-ui.min.css and anychart-font.min.css files file:

<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.13.0/fonts/css/anychart-font.min.css"/>

Learn more: Modules.

Basic Sample

Here is a sample with the default context menu:

Playground

Enabling / Disabling

The Context Menu is enabled by default, use the contextMenu() method or the enabled() method if you want to disable it. The first one is the shortest way:

var chart = anychart.column();
chart.contextMenu(false);

Note: Removing reference to UI JavaScript or CSS file may lead to the same result.

Here is a sample of two charts on the stage, one with disabled context menu:

Playground

Note: When you remove AnyChart Context Menu - default browser appears, you can remove browser context menu like this:

document.addEventListener('contextmenu', event => event.preventDefault());

Adjust Items

The default context menu in all charts consists of at least the following elements:

The exact list of the elements above varies in different types of charts and the state chart is on. For instance the Context Menu of a categorized chart contains "Include/Exclude" functionality, Treemap charts provide "Drill up" option when available. See the Menu items keys list to learn more.

You can change any item in the context menu using itemsFormatter() method. This method uses function as a parameter:

var chart = anychart.column();
var menu = chart.contextMenu();

// format context menu

menu.itemsFormatter(function(items){
  // items now holds function context
  // that contains all elements
  // generated by the component

  // modify items as need
  
  // some code to modify elements goes here

  // return modified array
  return items;
});

In the snippet above the items parameter can be used to obtain the context menu items array. Each element is contains fields described in anychart.ui.ContextMenu.Item typedef.

Below you will find sections that show how typical tasks like removal, changing text or behavior are solved.

Remove Items

To remove an element from the default context menu you need to delete an item in the itemsFormatter() as show below. Menu item keys are listed in Menu items keys section.

var chart = anychart.column();

// remove two element from the menu
chart.contextMenu().itemsFormatter(function(items){
    // Disable save as image option
   delete items["save-chart-as"];
   
   // delete about and separator 
   delete items["full-screen-separator"];
   delete items["about"];
   
  // return modified array
  return items;
});

Here is a sample with adjusted text of the default item and hidden last item:

Playground

Adjust Text

You can adjust text of any element. There are two ways to do that: overriding text in itemsFormatter() or using localization strings.

In the next sample captions of the "Save chart as..." and the "Save data as..." items are modified using itemsFormatter().

var chart = anychart.column();

chart.contextMenu().itemsFormatter(function(items){

  // change text of "Save chart as..."
  items["save-chart-as"].text = "Export as image...";

  // change text of "Save chart as..."
  items["save-data-as"].text = "Export chart data as...";

  return items;
});

Right click to see modified menu:

Playground

Change behaviour

You can adjust behavior of any element in itemsFormatter(). 

chart.contextMenu().itemsFormatter(function(items){

  // modify print item action
  items["print"].action = function() {
    alert('Custom action');
  };

  return items;
});

Playground

Add Item

You can add item in itemsFormatter(), use index to put it in proper place. 

// add items
chart.contextMenu().itemsFormatter(function(items){
    console.log(items);
  // starting index
  index = items['full-screen-enter'].index;

  // add item with custom action
  items['my-item'] ={
  'text': 'Custom item with alert action',
  'action': function() {
      alert('Custom action');
    },
   'index': index + 0.01
  };

  // add item with custom url
  items['my-url'] = {
  'text': 'Go to AnyChart Blog',
  'href': 'https://anychart.com/blog/',
  'index': index + 0.02
    };

  return items;
});

Playground

Custom Context Menu

The Context Menu is very flexible it may serve a variety of purposes. In some cases it makes much more sense to create a new Context Menu from the scratch rather than tune and remove items from the default context menu. Use itemsProvider() to create custom Context Menu. This method overrides whatever is set in default formatter, you need to create all items yourself.

The custom menu has no items by default, itemsProvider() method to set a function for creating custom items array:

// replace menu items provider
chart.contextMenu().itemsProvider(function() {
  var items = {
    'menu-item-1': {
      'text': 'Print chart',
      'action': function() {
        this.chart.print();
      }
    }, 
    'menu-item-2': {
      'text': 'Save chart as image',
      'action': function() {
        this.chart.saveAsPng();
      }
    }, 
    'menu-item-3': {
      'text': 'Go to my page',
      'href': 'http://docs.anychart.com',
      'target': '_blank'
    }
  }

  return items;
});

Here is a sample of a chart with the custom context menu:

Playground

Context

Context Menu passes context (additional information) into the formatting function depending on a point. The information on context can be found in api. It helps to make the Context Menu more flexible and provides additional functionality.

Change the Look

If you want to tune the visual appearance of the Context Menu you can define desirable appearance in your CSS file for custom CSS class and add the class name to the menu using addClassName() method.

The default context menu contains different set of items for different charts and depending on the state of a chart.

This section lists all keys and describes when the elements with such keys can appear, along with the default text:

All charts

  • 'select-marquee-start'
  • 'select-marquee-separator'
  • 'save-chart-as'
    • 'save-chart-as-png'
    • 'save-chart-as-jpg'
    • 'save-chart-as-pdf'
    • 'save-chart-as-svg'
  • 'exporting-separator'
  • 'save-data-as'
    • 'save-as-text'
    • 'save-data-as-xlsx'
  • 'share-with'
    • 'share-with-facebook'
    • 'share-with-twitter'
    • 'share-with-linkedin'
    • 'share-with-pinterest'
  • 'print-chart'
  • 'about'

Basic Cartesian Charts

  • 'exclude-points-list'
  • 'exclude-points-point*'
  • 'exclude-points-point'
  • 'exclude-points-keep-only'
  • 'exclude-points-include-all'
  • 'excluded-points-separator'
  • 'chart-with-series-point-separator'

Stock Charts

  • 'select-marquee-start'
  • 'zoom-marquee-start'
  • 'stock-specific-separator'

Treemap

  • 'drill-down-to'
  • 'drill-down-up'
  • 'drill-down-separator'

Localize the context menu

You can change the text of context menu items using Localization option.

If you want to do this yourself you can either do this from the code or by adding the messages with the keys listed in Menu items keys