CODEWITHSUNDEEP
highcharts
Sushin
Sushin

Reputation: 41

Showing Context Menu on right click of High Chart series

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.

Upvotes: 4

Views: 6972

Answers (3)

SovietFrontier
SovietFrontier

Reputation: 2217

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.

Upvotes: 6

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

It is not built-in functionality, but you can use custom-events extention and then catch right click. Last step will be show/hide any div with menu.

Upvotes: 0

Leonardo almeida
Leonardo almeida

Reputation: 21

I did the solution below. Hope it helps.

 plotOptions: {
        series: {
            point: {
                events: {
                     contextmenu: function (e) {
                            $('#constext-menu-div').css({top: e.chartY, left: e.chartX});
                            $('#constext-menu-div').show();
                            console.log(e);
                        },
                        click: function(){
                            $('#constext-menu-div').hide();
                        }
                }
            }
        }
    },

"http://jsfiddle.net/c42Ms/45/"

Upvotes: 2

Related Questions