Blog Help & Support Contact About Login

 Show Nav

Context Menu

Overview

The context menu is what appears when you right-click on an area of the chart. It allows for further chart interactions such as reloading the chart, viewing it as an image, printing the chart, and more. You can enable or disable various context menu items, as well as create your own custom items. You also have the option to display a context menu button so that mobile users can access the menu by tapping the icon.

Note: If you are building JavaScript charts that will be primarily viewed on mobile devices, you should use our mobile charts plugin. Built using ZingTouch, the plugin supports touch gestures and displays charts with mobile-specific features, including a custom context menu. Refer to the Mobile Charts Tutorial for more information.

Setup

To customize the context menu, you'll need to:

  • Use a graphset array to contain your chart JSON.
  • Place a gui object before the graphset array.

The gui object should be placed before the graphset array because it is a loader object. In the object, you can enable or disable existing context menu items with the behaviors array or create custom menu items and/or display a context menu button with the contextMenu object.

{
  gui: {
    //Context Menu Customization Here
  },
  graphset: [
    {
      //Chart JSON Here
    }
  ]
}

Refer to the GUI JSON page for a full list of objects and attributes.

Context Menu Items

You can style the appearance of the context menu, as well as choose what menu items to display by using our behavior IDs or by creating your own custom menu items.

Styling Menu Items

To style the context menu, add a contextMenu object to the gui object. You can change the background color of the context menu object with a backgroundColor attribute. You can fix the menu to a specific position with the docked (true or false) and position (left or right) attributes. To style the context menu items, create an item object. You can style the background and font colors, as well as how the items appear when hovered over. Refer to the Context Menu Item JSON page for a full attribute list.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  gui: {
    contextMenu: {
      backgroundColor: 'red',
      item: {
        backgroundColor: 'pink',
        fontColor: 'black',
        hoverState: {
          backgroundColor: 'black',
          fontColor: 'white'
        }
      }
    }
  },
  graphset: [
    {
      //Chart JSON omitted for brevity.
    }
  ]
}

Enabling/Disabling Menu Items

In the gui object, use the behaviors array to enable or disable various context menu behaviors. Each object must contain:

  • An id attribute to indicate the behavior ID.
  • An enabled attribute set to 'none' or 'all'.

Refer to the list of context menu behavior IDs below. In the below chart, the Download PDF behavior was disabled and the Crosshair Hiding/Showing behavior was enabled. Right-click on the chart to interact with the context menu.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  gui: {
    behaviors: [
      {
        id: 'DownloadPDF',
        enabled: 'none'
      },
      {
        id: 'CrosshairHide',
        enabled: 'all'
      }
    ]
  },
  graphset:[
    {
      //Chart JSON omitted for brevity.
    }
  ]
}

Behavior IDs

Below is a list of behavior IDs that can be used in the behaviors array.

Built-In IDs
About BugReport
BuyLicense CrosshairShow
CrosshairHide 2D
3D DownloadPDF
DownloadSVG EnterEdit
ExitEdit ExportData
FeedClear FeedFaster
FeedPause FeedSlower
FeedStart FullScreen
GuideShow GuideHide
HistoryBack HistoryForward
LinScale LogScale
LoupeHide LoupeShow
MaximizeLegend MinimizeLegend
NormalScreen Print
Reload SaveAsImage
ShowAll ViewSource
ZoomIn ZoomOut

Refer to the Behaviors JSON page for more information.

Creating Custom Items

To create your own custom context menu item, you'll need to first create the JavaScript function you want executed when clicked on. Next, add a customItems array to the contextMenu object to define the custom context menu item. Each object must contain:

  • A text attribute to specify the menu item text displayed.
  • A function attribute to specify the JavaScript function that will run when the item is clicked.
  • An id attribute to set the custom item ID, which will then be referenced in the behaviors array.

Finally, in the behaviors array, enable your custom context menu item by specifying the id and enabled attributes in their own object.

In the below chart, a Show Alert custom context menu item was created. Right-click on the chart to interact with the context menu.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

window.zingAlert= function(){
  window.alert("ZingChart is great for making interactive and stylish charts!")
}
 
var myConfig = {
  gui: {
    contextMenu: {
      customItems: [
        {
          text: 'Show Alert',
          function: 'zingAlert()',
          id: 'showAlert'
        }
      ]
    },
    behaviors: [
      {
        id: 'showAlert',
        enabled: 'all'
      }
    ]
  },
  graphset: [
    {
      //Chart JSON omitted for brevity.
    }
  ]
}

Context Menu Button

You can add a context menu button to your chart. This allows mobile users to tap on the icon to access the context menu. In the contextMenu object, create a button object. Add a visible attribute, and set the value to true. The context menu button will appear in the upper-left corner of the chart.

Note: Alternatively, you can use the mobile charts plugin, which is recommended for use on web pages that will be primarily viewed on mobile devices. Built using ZingTouch, the plugin supports touch gestures and includes a mobile context menu and other mobile-specific features. Refer to the Mobile Charts Tutorial for more information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  gui: {
    contextMenu: {
      button: {
        visible: true
      }
    }
  },
  graphset: [
    {
      //Chart JSON omitted for brevity.
    }
  ]
}

Styling the Menu Button

To style the context menu button, add a gear object to the contextMenu object. You can change the color and transparency level of the icon using the backgroundColor and alpha attributes. Refer to the Gear JSON page for a full attribute list.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  gui: {
    contextMenu: {
      button: {
        visible: true
      },
      gear: {
        backgroundColor: 'red',
        alpha: 1
      }
    }
  },
  graphset: [
    {
      //Chart JSON omitted for brevity.
    }
  ]
}

Creating a Custom Button

You can create your own custom context menu button using ZingChart shapes and the shape_click API event. See the below chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

var myConfig = {
  graphset: [
    {
      type: 'mixed',
      shapes: [
        {
          id: 'custom-cm-button',
          type: 'circle',
          backgroundImage: 'https://www.zingchart.com/resources/heart.png',
          backgroundRepeat: 'no-repeat',
          size: 20,
          backgroundColor: "pink",
          borderWidth: 1,
          borderColor: 'red',
          x: 30,
          y: 30,
          cursor: 'hand'
        }
      ],
      //Remaining chart JSON omitted for brevity.
    }
  ]
};

zingchart.bind('myChart', 'shape_click', function(e){
  if(e.shapeid === 'custom-cm-button') {
    zingchart.exec('myChart', 'showmenu', {
      x: 55,
      y: 35 
    });
  }

})

Summary

Got a question about how context menus work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.