Include the chart directive in HTML.
The data html attribute should point to the scope variable (exampleData).
Other directive attributes should be the same as the public attributes associated with each chart.

Configuration Options

ID

Identifier for the chart. Utilized heavily by d3.js and nvd3.js when creating and updating charts. If there is more than one chart on a page, every chart should have a unique id.
Datatype: String

Width

Controls the display width of the chart.
Datatype: Number

Height

Controls the display height of the chart.
Datatype: Number

Margin

Controls the external margin of the chart.

Datatype: Object, Number: {left:0,top:0,bottom:0,right:0}

Color

Controls the colors of the chart elements.

Datatype: Function

The function is the same as the d3.js color functions. Refer to d3.js Colors for d3.js color-specific documentation.

To use a configuration function, create a function on the $scope (i.e. $scope.colorFunction). The function can be named anything, as long as it does not conflict with an existing function name.
To ‘connect’ the $scope function with the chart.color() function, add a color=”” attribute to the directive, with the value of the attribute being the name of the $scope function (i.e. scope=”colorFunction()”).