nvd3 capture click event on stacked area chart

I am trying to capture click event on a nvd3 stacked area chart. I am able to capture tooltip show tooltip hide events. I want to capture click event and get the clicked point info. Please help. PLUNKER_LINK

my chart option is :

chart: {
                type: 'stackedAreaChart',
                height: 450,
                x: function (d) { return d[0]; },
                y: function (d) { return d[1]; },
                showValues: true,
                valueFormat: function (d) { return d3.format(',.4f')(d); },
                dispatch: {
                    tooltipShow: function (e) { console.log('! tooltip SHOW !') },
                    tooltipHide: function (e) { console.log('! tooltip HIDE !') },
                    beforeUpdate: function (e) { console.log('! before UPDATE !') },
                    elementClick: function (e) { alert('clicked');}

                }
            }
        };

You need to wrap the dispatch block in a stacked block:

stacked: {
    dispatch: {
        tooltipShow: function (e) { console.log('! tooltip SHOW !') },
        tooltipHide: function (e) { console.log('! tooltip HIDE !') },
        beforeUpdate: function (e) { console.log('! before UPDATE !') },
        elementClick: function (e) { alert('clicked');}
    }
}

But by doing so you still won't be able to receive elementClick, because stacked chart layer just won't send it. Instead you can receive the areaClick event, but it only gets trigged when you click inside the stacked area.

Therefore I would recommend you intercept dispatch events from the "interactive" layer. Just do it like this:

chart: {
    type: 'stackedAreaChart',
    ...
    interactiveLayer: {
        dispatch: {
            elementMousemove: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            },
            elementClick: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            }
        }
    }
}