##[Angular.js](http://angularjs.org/) Directives for [nvd3.js](http://www.nvd3.org), [d3.js](http://www.d3js.org) charts
[](https://travis-ci.org/cmaurer/angularjs-nvd3-directives)
[](https://david-dm.org/cmaurer/angularjs-nvd3-directives#info=dependencies)
[](https://david-dm.org/cmaurer/angularjs-nvd3-directives#info=devDependencies)
[](https://bitdeli.com/free "Bitdeli Badge")
[](https://waffle.io/cmaurer/angularjs-nvd3-directives)
[](https://gitter.im/cmaurer/angularjs-nvd3-directives)
```html
```
```html
```
[More Examples](http://cmaurer.github.io/angularjs-nvd3-directives)
## Basic Quick Start
### 1. Install Dependencies with [bower](http://bower.io/)
### Install [these](http://bower.io/#installing-bower) if you don't already have it.
#### [Angular.js](http://angularjs.org/)
bower install angular --save
#### [d3.js](http://www.d3js.org)
bower install d3 --save
#### [nvd3.js](http://www.nvd3.org)
bower install nvd3 --save
#### [Angularjs-nvd3-Directives.js](http://cmaurer.github.io/angularjs-nvd3-directives)
bower install angularjs-nvd3-directives --save
### 2. Create basic [Angular.js](http://angularjs.org/) application
Create a html page and start with the following code. For [d3.js](http://www.d3js.org) it is important the the page include ``````, otherwise you will get error messages about special characters.
```html
```
Include the downloaded dependencies in the `````` section of the html.
```html
```
Create a ```
```
> For this example we are hardcoding the data to make it easer to quickly create a chart. In the wild, this would obviously not be ideal, but it is more involved than a basic quick start can accomplish.
Close out the head
```html
```
Setup the `````` and the rest of the angular application
```html
```
The add the ```ng-app``` attribute to the `````` element, and set the value to ```nvd3TestApp```, which is the same value used in the script block above ```angular.module('nvd3TestApp', ...)```.
Add the Directive to the body of the application
```html
```
The directive is wrapped inside of a ```
``` that has a ```ng-controller``` attribute that has the same value as the name of the function created in the ```