Featured Posts

Give WebMatrix a BackboneGive WebMatrix a Backbone I’ve been following the numerous client side MVC frameworks for a while now and they are definitely a big part of the future of the web. They provide structure around the growing amount of Javascript...

Read more

Filtering in MDXFiltering in MDX Filtering results in MDX is very powerful however is not as simple as in a SQL query. A SQL query is 1-dimensional and the filtering the results returned is usually fairly simple with the use of the Where...

Read more

String InterningString Interning I recently was looking at ways to reduce the memory consumption of a very large collection of objects. My initial thoughts was some kind of a flyweight pattern that would let each item share their common...

Read more

Adding a right click context menu to highcharts

Posted by Chris | Posted in Javascript | Posted on 01-08-2012

Tags:

1

I’m a big fan of the highcharts charting library. It’s completely client side, looks great, and performs great. However one currently missing feature is the ability to catch the right click event on a chart to add a context menu. To provide this functionality I’ve forked the v2.2.1 version of highcharts which you can find here or use this direct link to highchart.src.js.

To implement this I used the code from Joe Kuan as a starting point which provided the context menu event for a chart and made changes to add the context menu event to a chart legend, provide more accurate mouse coordinates across browsers and to also show the right click context menu for point charts.

The context menu events can be setup as follows:

var newChart = new Highcharts.Chart({
    plotOptions: {
        series: {
            events: {
                legendContextMenu: function(e) {
                    // use e.mousePageX and e.mousePageY for mouse coordinates
                }
            },
            point: {
                events: {
                    contextmenu: function(point) {
                        // use this.mousePageX and this.mousePageY for mouse coordinates
                    }
                }
            }
        }
    }
});

Comments (1)

[...] recently pushed a change to github to add right click context menu functionality to highcharts. However my change applied to [...]

Write a comment