Last Updated: February 25, 2016
·
12.01K
· fmueller

Bind on click events in NVD3.js charts

NVD3.js is a nice library for drawing fancy charts with d3.js. But it lacks some documentation and that's why some use cases are harder to implement. The following code snippet shows how you can bind on click events in a multibar chart. When a bar is clicked you get the exact data point. This should also work for other types of charts when they emit elementClick events.

chart.multibar.dispatch.on('elementClick', function(e){
    console.log('element: ' + e.value);
    console.dir(e.point);
});

4 Responses
Add your response

Thanks, just what I was looking for!

over 1 year ago ·

Thanks for the feedback.

over 1 year ago ·

Thanks, the code above is for multiBarChart.
If you guys use the others such as discreteBarChart, you can use like this
chart.discretebar.dispatch.on('elementClick', function(e){
console.log('element: ' + e.value);
console.dir(e.point);
});

over 1 year ago ·

Hi

I am using this example. But while using it I am getting this error on the console.

ReferenceError: chart is not defined

Can you please tell me if I am missing something?

over 1 year ago ·