Event Handling in nvd3

Question

I am using nvd3 and trying to add event handling while clicking on the chart. But I face some problems while implementing it and I am not able to get a solution due to lack of documentation of nvd3. I followed this link, but I still get the following error in the console:

ReferenceError: chart is not defined

Can anyone tell me what I am missing or any best solution for the event handling in nvd3.

Answer 1

Probably your problem is the name of the graph variable; I make a fiddle for you. In my example, "chart" is the name of the graph variable. Check out that also in your case it's the same.

var chart = nv.models.multiBarChart();

Anyway, with the fiddle you can see the full code. If you click on an item, you can see the messages in console.

http://jsfiddle.net/g952qb5c/

Answer 2

As suggested by Giordano, I looked for the name of the graph and the dispatch events. And then I have added these event listener in the options like this.

Note: This solution worked for the nvd3 and angular.

$scope.options2 = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            showLabels: true,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },
            pie:{
                dispatch: {
                    elementClick : function(e){
                        console.log('element: ' + e.value);
                        console.log(e);
                    }
                }
            }
        }
    };

Hope this will help to others also.