Getting Started

Dependencies

nv-chart requires the following to be installed:

Examples

Basic Example

HTML:

<html ng-app="myApp">
    <head>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="d3.js"></script>
        <script type="text/javascript" src="nv.d3.js"></script>
        <script type="text/javascript" src="nv-chart.js"></script>
        <link rel="stylesheet" type="text/css" href="nv.d3.css" />
        <link rel="stylesheet" type="text/css" href="nv-chart.css" />
    </head>

    <body ng-controller="MyCtrl">
        <div class="chartStyle" nv-chart="chartOptions"></div>
    </body>
</html>

HTML breakdown:

Add a reference to AngularJS:

<script type="text/javascript" src="angular.js"></script>

Add a reference to D3.js:

<script type="text/javascript" src="d3.js"></script>

Add a reference to NVD3.js script and css:

<script type="text/javascript" src="nv.d3.js"></script>
<link rel="stylesheet" type="text/css" href="nv.d3.css" />

Add a reference to nv-chart script and css (css is currently optional):

<script type="text/javascript" src="nv-chart.js"></script>
<link rel="stylesheet" type="text/css" href="nv-chart.css" />

Define your AngularJS app:
```
<html ng-app="myApp">
```
Define the AngularJS controller you will be using on the page:
```
<body ng-controller="MyCtrl">
```
Add the following to the page where you would like your chart to be. chartOptions is a scope variable that will be defined in the AngularJS controller:
```
<div class="chartStyle" nv-chart="chartOptions"></div>
```

Javascript:

angular.module('myApp',['nvChart']);

function MyCtrl($scope) {
    $scope.chartOptions = {
        chartType: 'lineChart',
        data: 'chartData'
    };
    $scope.chartData = [{
        key: 'Series 1',
        values:[
            {'x': 1, 'y' : 5},
            {'x': 2, 'y' : 10},
            {'x': 3, 'y' : 15}
        ]
    }];
};

Javascript breakdown:

Initialize your AngularJS app and include nv-chart as a dependency:
```
angular.module('myApp',['nvChart']);
```

In your AngularJS controller, define a scope variable with your chart data:

$scope.chartData = [{
    key: 'Series 1',
    values:[
        {'x': 1, 'y' : 5},
        {'x': 2, 'y' : 10},
        {'x': 3, 'y' : 15}
    ]
}];

In your AngularJS controller, define a scope variable with your nv-chart options. At a minimum, the chartType and the chartData options must be set:
```
$scope.chartOptions = {
    chartType: 'lineChart',
    data: 'chartData'
};
```

Result:

Multiple Series

HTML:

<html ng-app="myApp">
    <head>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="d3.js"></script>
        <script type="text/javascript" src="nv.d3.js"></script>
        <script type="text/javascript" src="nv-chart.js"></script>
        <link rel="stylesheet" type="text/css" href="nv.d3.css" />
        <link rel="stylesheet" type="text/css" href="nv-chart.css" />
    </head>

    <body ng-controller="MyCtrl">
        <div class="chartStyle" nv-chart="chartOptions"></div>
    </body>
</html>

Scope variables:

$scope.chartOptions = {
    chartType: 'multiBarChart',
    data: 'chartDataOne',
    margin: { top: 0, bottom: 20, left: 40, right: 10 },
};

$scope.chartData = function() {
    var sin = [], cos = [];

    for (var i = 0; i < 100; i++) {
        sin.push({ x: i, y: Math.sin(i / 10) });
        cos.push({ x: i, y: .5 * Math.cos(i / 10) });
    }

    return [
        { values: sin, key: 'Sine Wave' },
        { values: cos, key: 'Cosine Wave' }
    ];
}();

Result:

API Documentation

Options passed to nv-chart are logically mapped to NVD3 options.

Chart options structure:

var chartOptions = {
    // required options
    chartType: null,
    data: [],

    // general chart properties
    color: [],
    margin: {},
    tooltips: true,

    // x-axis
    xValue: null,
    xAxisLabel: null,
    xAxisTickFormat: null,

    // y-axis
    yValue: null,
    yAxisLabel: null,
    yAxisTickFormat: null,
}

Chart data structure:

var chartData = {
    // required options
    chartType: null,
    data: [],

    // general chart properties
    color: [],
    margin: {},
    tooltips: true,

    // x-axis
    xValue: null,
    xAxisLabel: null,
    xAxisTickFormat: null,

    // y-axis
    yValue: null,
    yAxisLabel: null,
    yAxisTickFormat: null,
}

Chart Options

General

chartType : One of "bulletChart", "cumulativeLineChart", "discreteBarChart", "historicalBarChart", "lineChart", "linePlusBarChart", "linePlusBarWithFocusChart", "lineWithFisheyeChart", "lineWithFocusChart", "multiBarChart", "multiBarHorizontalChart", "multiBarTimeSeriesChart", "pieChart", "scatterChart", "scatterPlusLineChart", "sparkline", "stackedAreaChart"
data : Can either be a string of a scope variable name or an array containing the data to be charted. Because of performance concerns, nv-chart only watches strings for scope reference changes
color: An array of D3 accepted color values ["#ffeeaa", "#f9f", "red"] used to color the different data sets
margin: An object of the form { top: 10, bottom: 10, left: 10, right:10 }
color: An array of D3 accepted color values ["#ffeeaa", "#f9f", "red"] used to color the different data sets
tooltips (Default: true): Displays tooltips if true
showValues (Default: false): Displays the values in the chart if true
staggerLabels (Default: false): Staggers the x-axis labels for readability if true
useInteractiveGuideline (Default: true): Displays an interactive guideline on the graph if true
transitionDuration (Default: 0): A number indicating the speed of transitions
showXAxis (Default: true): Displays the x-axis if true
xValue: Sets the x-accessor to the specified constant or function of the form function(d, i) { }
xAxisLabel: Sets the label of the x-axis
xAxisTickFormat: Sets the x-axis tick format to the specified D3 format string or function
xShowMaxMin (Default: true): Display the max/min values on the x-axis
x2AxisLabel: Sets the label of the x2-axis
x2AxisTickFormat: Sets the x2-axis tick format to the specified D3 format string or function
showYAxis (Default: true): Displays the y-axis if true
yValue: Sets the y-accessor to the specified constant or function of the form function(d, i) { }
yAxisLabel: Sets the label of the y-axis
yAxisTickFormat: Sets the y-axis tick format to the specified D3 format string or function
yShowMaxMin (Default: true): Display the max/min values on the y-axis
y1AxisLabel: Sets the label of the y1-axis
y1AxisTickFormat: Sets the y1-axis tick format to the specified D3 format string or function
y2AxisLabel: Sets the label of the y2-axis
y2AxisTickFormat: Sets the y2-axis tick format to the specified D3 format string or function
y3AxisLabel: Sets the label of the y3-axis
y3AxisTickFormat: Sets the y3-axis tick format to the specified D3 format string or function
y4AxisLabel: Sets the label of the y4-axis
y4AxisTickFormat: Sets the y4-axis tick format to the specified D3 format string or function

Pie Chart Specific Options

showLabels (Default: true): Displays labels if true
labelThreshold (Default: 0.5): Configure the minimum slice size for labels to show up
labelType (Default: key): Configure what type of data to show in the label. One of: "key", "value" or "percent"
donut (Default: false): Sets the chart to donut mode
donutRatio (Default: 0): Configure the size of the donut hole

Scatter Chart Specific Options

showDistX (Default: false): Show distribution of values on x-axis
showDistY (Default: false): Show distribution of values on y-axis
onlyCircles (Default: false): All points are plotted as circles