directives for and

View the Project on GitHub cmaurer/angularjs-nvd3-directives

Working with events

Events exposed by nvd3.js and d3.js are re-emitted from the directives as scope events ($scope.$emit). Events are re-emitted with the same names as the underlying framework with the addition on ‘.directive’. Using duplicate names overrides existing events.

If an event listener was already registered for the same type, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as “” and “” From d3.js wiki

Event Example

To capture exposed events, add a listener for the event(s) of interest using scope $on method.

The directives will re-emit an event usingt the events original name, plus .directive on the end.

For example, all nvd3 tooltipShow events are re-emitted as tooltipShow.directive. Hovering over the chart will cause the tooltipShow event to fire.

$scope.$on('tooltipShow.directive', function(angularEvent, event){
    angularEvent.targetScope.$parent.event = event;
<div ng-controller="ExampleCtrl">
    <div><b>Point Data</b>
        <div ng-repeat="point in event.point">
            <div ng-bind="point"></div>
Point Data

Exposed Events by Model

Core * render_start * render_end


Lines * Element Mouseover Tooltip * Element Mouseout Tooltip * Element Click Tooltip

Stacked * Area Click Toggle * Tooltip Show * Tooltip Hide

Interactive Layer * Element Mouseout * Element Mousemove

Discrete Bar * Element Mouseover Tooltip * Element Mouseout Tooltip

Multibar * Element Mouseover Tooltip * Element Mouseout Tooltip * Element Click

Pie * Element Mouseover Tooltip * Element Mouseout Tooltip

Scatter * Element Mouseover Tooltip * Element Mouseout Tooltip

Bullet * Element Mouseover Tooltip * Element Mouseout Tooltip

Legend * State Change Legend * Legend Click

Controls * Legend Click

Render Start

Render End

Tooltip Show

$scope.$on('tooltipShow.directive', function(angularEvent, event){

Tooltip Hide

$scope.$on('tooltipHide.directive', function(angularEvent, event){

Before Update

$scope.$on('beforeUpdate.directive', function(angularEvent, event){

State Change

$scope.$on('stateChange.directive', function(angularEvent, event){

Change State

$scope.$on('changeState.directive', function(angularEvent, event){

Element Mouseover Tooltip

$scope.$on('elementMouseover.tooltip.directive', function(angularEvent, event){

Element Mouseout Tooltip

$scope.$on('elementMouseout.tooltip.directive', function(angularEvent, event){

Element Click

$scope.$on('elementClick.directive', function(angularEvent, event){

Area Click Toggle

$scope.$on('areaClick.directive', function(angularEvent, event){

Element Mouseout

$scope.$on('elementMouseout.directive', function(angularEvent, event){

Element Mousemove

$scope.$on('elementMousemove.directive', function(angularEvent, event){

State Change Legend

$scope.$on('stateChange.legend.directive', function(angularEvent, event){

Legend Click

$scope.$on('legendClick.directive', function(angularEvent, event){