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(',.0f')(d);
      },
      color: function(d) {
        return d.color;
      },
      duration: 200,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      }
    }
  };
  
  $scope.data = [{
    values: [{
      "label": "A",
      "value": 45,
      "color": "purple"
    }, {
      "label": "B",
      "value": 30,
      "color": "rgb(10,20,30)"
    }, {
      "label": "C",
      "value": 50,
      "color": "#8b7aeb"
    }, {
      "label": "D",
      "value": 200,
      "color": "#3982d2"
    }, {
      "label": "E",
      "value": 100,
      "color": "#a6d9fd"
    }, {
      "label": "F",
      "value": 20,
      "color": "#cf4385"
    }, {
      "label": "G",
      "value": 25,
      "color": "#75b6d2"
    }, {
      "label": "H",
      "value": 30,
      "color": "#76ce38"
    }]
  }];
});

/* Styles go here */