Accepted answer

You might find the Highcharts Options Reference a good starting point.

From the reference, here's an example of a column chart where clicking a column fires an alert.


Add click event under Plotoption

plotOptions: {
                series: {
                    point: {
                        events: {
                            click: function () {


I needed to do a something similar. Hope it helps.

Disclaimer: I am using GWT Highcharts wrapper!

Here are the highlights of what I did:

1) I created an interface FooCallback that has a method bar( int index ) and implemented it

2) Created a method getBarClickCallback that returns a JavascriptObject (function), that has the FooCallback as a param

3) I add a click callback in the chart option /plotOptions/series/point/events/click, passing it getBarClickCallback

4) Once a bar is clicked, int index ) is invoked



private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
    return function()
        if( this.x !== "undefined" && this.x >= 0 ){

public void bar( int index ){
    //handle chosen index


Additionally I wanted to listen to category label clicks (By the way I am showing an inverted bar graph that has categories)

1) Created a method that will locate categories in the dom and add click events to them. I called it addLabelClickHandler(FooCallback callback, String chartId) and used jquery to add the events.

2) Add a ChartLoadEventHandler that calls addLabelClickHandler() that forwards params to addLabelClickHandler(FooCallback callback, String chartId)

3) Once a axis category is clicked, int index ) is invoked ...

chart.setLoadEventHandler(new ChartLoadEventHandler() {

    public boolean onLoad(ChartLoadEvent chartLoadEvent) {
    return false;

private void addLabelClickHandler(){

private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
        try {
            var search = '#' + chartId + ' .highcharts-axis-labels:first text';
                    function(i, j) {
                        $wnd.jQuery(this).css("cursor", "pointer");
                        $wnd.jQuery(this).click(function() {
        } catch (err) {



Related Query

More Query from same tag