Angular.js Directives for nvd3.js, d3.js charts

Build Status Dependencies Status devDependency Status Bitdeli Badge Stories in Ready Gitter chat

Line Charts

Stacked Area Charts

More Examples

Basic Quick Start

1. Install Dependencies with bower

Install these if you don't already have it.





2. Create basic Angular.js application

Create a html page and start with the following code. For d3.js it is important the the page include <meta charset="utf-8">, otherwise you will get error messages about special characters.

Include the downloaded dependencies in the <head> section of the html.

Create a <script> block for the angular application

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

Setup the <body> and the rest of the angular application

The add the ng-app attribute to the <body> 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

The directive is wrapped inside of a <div> that has a ng-controller attribute that has the same value as the name of the function created in the <script> block above.

Close out the body and html elements.

3. Test

If everything is setup correctly, you should be able to open the page and see a basic line chart.

comments powered by Disqus
This page was last updated over 4 years ago.