nvd3 capture click event on stacked area chart

Question

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');}

                }
            }
        };

Did you get it? You are using angularjs-nvd3 not angularjs-nvd3 directives.. — ackuser, Oct 28 '15 at 16:26

mindex · Accepted Answer · 2015-12-01T06:18:20.230

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);
            }
        }
    }
}

If you use interactive layer events, you couldn't get point info such as label, series and etc. — Saeid, Dec 21 '15 at 12:39
@SaeidZebardast of course you can - it has nothing to do with the interactiveLayer. Just declare an "api" attribute in your HTML nvd3 tag, and you'll be able to access your chart object and data series in JS. e.g. HTML ``; and JS `var _chart = $scope.chartApi.getScope().chart; var pointIndex = nv.interactiveBisect($scope.data[0].values, e.pointXValue, _chart.x());` — mindex, Dec 21 '15 at 14:04

nvd3 capture click event on stacked area chart

1 Answers1