score:9

Accepted answer

I had this same issue.

Using the webkit inspector I can see that Highcharts binds a click event to the chart container (the div with the 'highcharts-container' class), and this seems to interfere with clicking.

Provided you don't want any of the functionality in that click event, you can remove it by setting

chart.container.onclick = null;

Otherwise, you'll need to use the built-in highcharts event properties to set your callbacks. As the OP noted, there is an 'events' property for the chart object, which should trigger when clicking the plot background. There is also an event property for the plot options which triggers when clicking the series itself.

For example, for area plots:

var chart = new Highcharts.Chart({
    ...
    plotOptions: {
        area: {
            events: {
                click: function(event) {
                    // do something
                }
            },
        ...
        }
    }
    ...
});

More more info see: http://www.highcharts.com/ref/#plotOptions-area-events

score:3

A very late answer, but still necessary, in my opinion.

The highcharts documentation http://api.highcharts.com/highcharts#chart.events.click

refers to a script that simply forwards an event to the chart's container: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/

$(function () {
    $('#chart1').highcharts({
        ...
    });


    $('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });
});

score:5

I ran into this, and wrote an extension/plugin for highcharts 3 that bubbles click events out of highcharts:

/*global Highcharts*/
(function (Highcharts) {
    "use strict";

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) {
        var pointer = this,
            parent = pointer.chart.container.parentNode,
            bubbleUp = true;

        // Add a method to the event to allow event handlers to prevent propagation if desired
        e.swallowByHighCharts = function() { bubbleUp = false; };

        // Call the original event
        original.apply(this, Array.prototype.slice.call(arguments, 1));

        // Trigger the event on the container's parent (to bubble the event out of highcharts)
        // unless the user wanted to stop it
        if (bubbleUp && typeof parent !== 'undefined' && parent) {
            jQuery(pointer.chart.container.parentNode).trigger(e);
        }
    });

}(Highcharts));

With this added, all click events are bubbled out of the highcharts container. Triggering it on the container itself causes a ton of looping due to how highcharts and jquery interact with event firing, and at least in my case I didn't actually have any handlers on the element used as a render target anyway.

The extra bit about swallowByHighCharts allows for disabling the new behavior if needed - ie,

config = {
    chart: { ... }
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(e) {
                        // Don't pass along clicks on series points for one reason or another
                        e.swallowByHighCharts();
                    }
                }
            }
        }
    }
}

Related Query

More Query from same tag