How do I use callbacks on NVD3 Charts - nvd3.js

Question

I have been using NVD3 but have decided to add some on-click events. I found an example using a horizontal bar chart.
vm.qcoptions = {
chart: {
type: 'multiBarHorizontalChart',
//type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function (d) { return d.label; },
y: function (d) { return d.value + (1e-10); },
showValues: true,
valueFormat: function (d) {
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: ''
},
yAxis: {
axisLabel: '',
axisLabelDistance: -10
},
callback: function (chart) {
chart.multibar.dispatch.on('elementClick', function (e) {
console.log('elementClick in callback', e.data);
});
}
}
};
The example above works when using the multiBarHorizonatChart, but when I switch to the discreteBarChart it throws this error "Cannot read property 'dispatch' of undefined" at this line
chart.multibar.dispatch.on('elementClick', function (e) {
I have tried to inspect chart and determine what I should in in place of chart.multibar for the bar chart but I am stumped. Can anyone shed any light on this?

Answer 1

You are referring now to the discrete bar chart. You will need to reflect that in the callback function as follows:
chart.discretebar.dispatch.on('elementClick', function (e) {
console.log('elementClick in callback', e.data);
});
I suggest that you always refer to this page with the extended radio button selected in order to see the appropriate property names.