ZingChart: How to make controllable custom context menu items

Custom context menu items are great but what if you want them to show only when you right click on a certain area of the chart like the nodes? 

For example, lets say you have a custom context menu items that changes the background color of a bar, it would only make sense for the custom context menu item to show when you are targeting a bar. This is when controllable custom context menu items are useful. The first step would be to set up a normal custom context menu item. You can find out more about how to do that here.

We set ours up like so:

"gui":{
        "context-menu":{
            "separator":{
                "line-color":"#ccc"
            },
            "custom-items":[
                {
                    "id" : "cm-demo",
    	            "text" : "View demo Info",
	            	"enabled" : "contextMenuCtrl"
                },
            ]    
        }
    },

This will give us a new context menu item labeled "View demo Info". When clicked the custom item will show only if contextMenuCtrl returns true. If it returns false, the custom context menu item will not show. We will write the contextMenuCtrl function that will return either true or false depending on what is clicked.

Lets write the function! We need it to return true if right click on a bar and return false if we click anything else.

window.contextMenuCtrl = function(oInfo, sMenuId) {} 

Here is the skeleton of our function. We will use oInfo.target to know what we right clicked and sMenuId to target the correct custom menu item.

We are going to have a variable start as false and turn to true if we right click a node or bar. So we will also need an if statement that checks if the sMenuId === 'cm-demo'  and if oInfo.target === 'node' .

Our final function looks like so:

window.contextMenuCtrl = function(oInfo, sMenuId) {
    var bEnabled = false;
    if (sMenuId === 'cm-demo' && oInfo.target && oInfo.target === 'node') {
        bEnabled = true;
    }
    return bEnabled;
}

Awesome we are ready to apply it to the chart! Have a look at our finished product!

Demo