Question

All,

I’m using HighCharts in a web app I’m working on, and generally, I like it very much.

However, I’m having a hard time figuring out how capture a mouse click on the ENTIRE chart.

In other words – I’d like to know when the user clicks ANYWHERE on the chart (e.g., the plot area, the title, the x- or y-axis, the margins and padding around the chart elements, etc.)

Or, I’d like to disable events altogether, so I can trap the event in the container itself.

More detailed version…

I have a DIV that contains my HighChart.

I want to know if the user clicks ANYWHERE within that DIV.

So – initially I tried attaching an “onclick” event to the DIV, but that never gets fired, presumably because the click is getting trapped by the HighChart.

So, in the code that sets up the HighChart, I added this:

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

This works OK IF the user clicks somewhere within the plot area, but not if she clicks anywhere else in the chart (e.g., the x-axis, the y-axis, the title, the padding around the chart elements, etc.)

So – how can I make the ENTIRE chart clickable?

Many thanks in advance!

Answer 1

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