Home
n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of D3.js.
To install n3-line-chart with the package manager bower you need to run following command from the terminal.
bower install n3-line-chart
Alternatively you can download the latest release and place the line-chart.min.js wherever you want. Please note, that you need to also download D3.js and AngularJS when installing n3-line-chart manually!
Next, you need to reference line-chart.min.js in your index.html file.
<script src="bower_components/n3-line-chart/build/line-chart.min.js"></script>
Finally, you need to reference the n3-line-chart module in your AngularJS application.
angular.module('myApp', ['n3-line-chart'])
The module was originally named
n3-charts.linechart. This is still valid but will be removed in the 2.x release.
Here is an example how your HTML file should look like.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/n3-line-chart/build/line-chart.min.js"></script>
<script type="text/javascript">
angular.module('myApp', ['n3-line-chart'])
</script>
</head>
<body>
<!-- Now you can use the n3-line-chart directive -->
</body>
</html>