Showing Context Menu on right click of High Chart series

Question

I want to show a context menu on right click of the series plotted in High charts. I am not able to find any option in High charts to do this. Can any one suggest a way to achieve this requirement.

Answer 1

Well it is 2019 and there still isn't a solution for this that comes with the base HighCharts download. I have found a way to manipulate the LEFT click, in order to show a menu of sorts. Now I understand this may not be the best case scenario, but you still have full access to all of the data from the click, and will still be able to do normal drill down functionality etc. You just might have to rework it. This is a TypeScript example, but can easily be replicated to JavaScript with a few edits.

Please excuse the lack of CSS for the menu.

Your functions initialized before the chart. The variable is used to keep the menu from disappearing and is NOT mandatory here.

let callDrillDown = () => {
    alert('drill1');
}

let callDrillDown2 = () => {
    alert('drill2');
}

let mouseIn: boolean;

This is the bread and butter, during the click, you're pulling the <div> from the HTML and adding an onclick action to it.

plotOptions: {
    column: {
        events: {
            click: (event: any) => {
                let contextMenu = document.getElementById('contextMenu');
                let contextMenuItem1 = document.getElementById('contextMenuItem1');
                let contextMenuItem2 = document.getElementById('contextMenuItem2');

                contextMenuItem1.onclick = callDrillDown;
                contextMenuItem2.onclick = callDrillDown2;

                contextMenu.onmouseenter = () => {
                    mouseIn = true;
                };

                contextMenu.onmouseleave = () => {
                    mouseIn = false;
                    setTimeout(() => {
                        if (!mouseIn) {
                            contextMenu.setAttribute('style', 'display: none');
                        }
                    }, 1000);
                };

                contextMenu.setAttribute('style', 'top: ' 
                       + event.pageY + 'px; left:'
                       + event.pageX + 'px;');
            }
        }
    }
}

Inside of the body add the HTML

<div id="contextMenu" style="display: none" class="contextMenu">
    <div id="contextMenuItem1">Data</div>
    <div id="contextMenuItem2">Data2</div>
</div>

Here is the jsFiddle. Hope this helped.