22

I have horizontal bar chart with Highcharts. How can I make each bar clickable for an event, for example like 'alert' ?

I have this series for example:

series : [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
}];

What more should I do?

4 Answers 4

40

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.

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

2
  • 1
    @Christian - link now fixed for the bar chart example. It looks like the Highcharts team still has to fix the links within their API reference, though.
    – mg1075
    Aug 17, 2012 at 14:05
  • I have location bars showing status, I need to have navigate the user to a page on clicking a particular bar, can anyone tell me how to do this? Dec 30, 2013 at 13:03
2

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, FooCallback.bar( int index ) is invoked

...

chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));

private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
    return function()
    {
        if( this.x !== "undefined" && this.x >= 0 ){
            [email protected]::bar(I)(this.x);
        }
    };
}-*/;

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, FooCallback.bar( int index ) is invoked ...

chart.setLoadEventHandler(new ChartLoadEventHandler() {

    @Override
    public boolean onLoad(ChartLoadEvent chartLoadEvent) {
    addLabelClickHandler();
    return false;
    }
    });

private void addLabelClickHandler(){
    addLabelClickHandler(this,chart.getElement().getId());
}

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

    }-*/;

Jeff

0

Add click event under Plotoption

plotOptions: {
                series: {
                    point: {
                        events: {
                            click: function () {
                                    alert(this.category)
                            }
                        }
                    }
                }
            }
0

You can do this by adding following in plotOptions > series. Example attached

        point: {
            events: {
                click: function () {
                    alert('Category: ' + this.category + ', value: ' + this.y);
                }
            }
        }

http://jsfiddle.net/tkab9f20/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.