[Solved]-Highcharts: Area clickable-Highcharts

You can use the click chart event when clicking on the plot background, like so:

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

Here's the link to the documentation:

http://www.highcharts.com/ref/#chart-events--click

Hope that helps.

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.

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 },..