Untitled

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.7/angular-nvd3.min.js"></script>

  <script src="app.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" />

</head>

<body ng-app="chartApp">
  <div ng-controller="ChartController">
    <nvd3 options="options" data="data"></nvd3>
  </div>
</body>


</html>

var app = angular.module('chartApp', ['nvd3']);

app.controller('ChartController', function($scope) {
    $scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 50,
                left: 55
            },
            x: function(d){return d.label;},
            y: function(d){return d.value;},
            showValues: true,
            valueFormat: function(d){
                return d3.format('')(d);
            },
            color: ["red","rgb(10,20,30)","#935bcd","#8b7aeb","#8b7aeb","#3982d2","#a6d9fd","#75b6d2","#93dadc","#65d1ae","#61c478","#4da338","#76ce38","#d9ec38","#fbe739","#f3af2f","#ee7b28","#ee7b28"],
            duration: 200,
            xAxis: {
                axisLabel: 'X Axis'
            },
            yAxis: {
                axisLabel: 'Y Axis',
                axisLabelDistance: -10
            }
        }
    };
  $scope.data = [
    {
        values: [
            {
                "label" : "A" ,
                "value" : 45
            } ,
            {
                "label" : "B" ,
                "value" : 30
            } ,
            {
                "label" : "C" ,
                "value" : 50
            } ,
            {
                "label" : "D" ,
                "value" : 200
            } ,
            {
                "label" : "E" ,
                "value" : 100
            } ,
            {
                "label" : "F" ,
                "value" : 20
            } ,
            {
                "label" : "G" ,
                "value" : 25
            } ,
            {
                "label" : "H" ,
                "value" : 30
            }
        ]
    }
];
});

/* Styles go here */