css - How can I place a MouseOver event on a DiscreteBar Chart bar -

i'm trying create a bar chart using nvd3 angular directive here: http://krispo.github.io/angular-nvd3/#/

the chart i'm using one: http://krispo.github.io/angular-nvd3/#/discretebarchart

this html creating chart on page (the context doesn't seem important in scenario):

                    <nvd3 options="options"                           data="top10bar"                           ng-mouseenter="mouseenterevent($event)"></nvd3> 

this controller code (within tag sits)

app.controller('barchartcontroller', function ($scope) {

$scope.options = {     chart: {         type: 'discretebarchart',         height: 350,         margin: {             top: 20,             right: 20,             bottom: 60,             left: 55         },         width: 500,         x: function (d) {             return d.label;         },         y: function (d) {             return d.value;         },         showvalues: true,         transitionduration: 500,         xaxis: {             axislabel: 'x axis'         },         yaxis: {             axislabel: 'y axis',             axislabeldistance: 30         },         tooltips: false,         discretebar: {             rectclass: ['discretebar', 'tablerow']         },         interactive: true     } };  $scope.mouseenterevent = function (event) {      console.log("event!");     console.log(event); };  $scope.$on('elementmouseover.tooltip', function (event, data) {     console.log("in scope.on");     console.log(event);     console.log(data);     console.log("end"); });  $scope.$on('tooltipshow.directive', function (angularevent, event) {     angularevent.targetscope.$parent.event = event;     angularevent.targetscope.$parent.$digest(); }); 

of 3 event handlers can see @ bottom of controller, first 1 works because have ng-mouseenter option specified in nvd3. however, works when mouse enters on entire chart div. want detect mouse on over individual bar can highlight , highlight part of view.

how go doing i'm trying achieve here? appreciated, cheers!

i had same issue, detect event on bar have written following.

$scope.mouseenterevent = function (event) {     if (event.target.localname === 'rect') {         /// operation here.     } }; 

it worked me. hope you, let me know if find better way pass event chart itself.