Highcharts: Area clickable

Question

I have an area Highchart chart. Added a click event to the chart, like this:

plotOptions: {
                area: {
                    marker: {
                        enabled: false
                    },
                    cursor: 'Pointer',
                    stacking: 'normal',
                    events: {
                        click: function(event) {
                          alert("hi there");
                        }
                    }                   
                }
            }

It works fine. The problem is that you can only click very near to a line, but not on the area below the line, it is not clickable.

Is there a setting that I overlooked?

Answer 1

You can use this trackByArea: true area function in plotOptions

trackByArea: Boolean

Since 1.1.6 Whether the whole area or just the line should respond to mouseover tooltips and other mouse or touch events. Defaults to false.

Combine this with the click event

click: Function

Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.

ex:

plotOptions: { area: { **trackByArea: true**, marker: { enabled: false },..

Answer 2

Actually, you can do exactly what you want out of the box. The chosen answer was only looking at events for the PlotOptions object; you need to look at events for the Chart object.

Documentation and example at: http://www.highcharts.com/ref/#chart-events--click

When you click on the background, it fires the event.

chart: {
        renderTo: 'container',
        events: {
            click: function(event) {
                alert ('x: '+ event.xAxis[0].value +', y: '+
                      event.yAxis[0].value);
            }
        }        
    },

Answer 3

According to the highcharts documentation, the click event only covers clicking on the series itself, so it will not register click events for clicking beneath the line.

To do what you want, you may need to handle things on your own by using the mouseOver event. Unforutnately, this event fires when the mouse hovers over the graph, which would mean you'd need to figure out where the mouse is on the graph and so forth.

Alternatively, you could modify the highcharts source code to suit your needs, or extend it, but in any case, I do not believe that this can be done easily.