<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../angular.js"></script> <script src="../bower_components/d3/d3.js"></script> <script src="../bower_components/nvd3/build/nv.d3.js"></script> <script src="../bower_components/angular-nvd3/dist/angular-nvd3.js"></script> <link rel="stylesheet" href="../bower_components/nvd3/build/nv.d3.css"> <script> angular.module('myApp',['nvd3']) .controller('myCtrl',function($scope){ $scope.options={ chart: { type: 'discreteBarChart', height: 450, margin : { top: 20, right: 20, bottom: 60, left: 55 }, x: function(d){ return d.label; }, y: function(d){ return d.value; }, showValues: true, valueFormat: function(d){ return d3.format(',.4f')(d); }, transitionDuration: 500, xAxis: { axisLabel: 'X Axis' }, yAxis: { axisLabel: 'Y Axis', axisLabelDistance: 30 } } }; $scope.data=[{ key: "Cumulative Return", values: [ { "label" : "A" , "value" : -29.765957771107 }, { "label" : "B" , "value" : 0 }, { "label" : "C" , "value" : 32.807804682612 }, { "label" : "D" , "value" : 196.45946739256 }, { "label" : "E" , "value" : 0.19434030906893 }, { "label" : "F" , "value" : -98.079782601442 }, { "label" : "G" , "value" : -13.925743130903 }, { "label" : "H" , "value" : -5.1387322875705 } ] }]; }) </script> </head> <body ng-controller="myCtrl"> <nvd3 options='options' data='data'></nvd3> </body> </html>