NVD3 Testing for Error Bar

by sberube

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvd3 Multi-bar Chart Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
  </head>

  <body ng-controller="myCtrl">

    <nvd3 options="options" data="data" api="api"></nvd3>

    <script>
      var app = angular.module('myApp', ['nvd3']);

      app.controller('myCtrl', function($scope, $timeout) {
        $scope.options = {
          chart: {
            type: 'multiBarChart',
            height: 450,
            margin: {
              top: 20,
              right: 20,
              bottom: 45,
              left: 45
            },
            clipEdge: true,
            duration: 0,
            stacked: true,
            xAxis: {
              axisLabel: 'X Axis',
              showMaxMin: false,
              tickFormat: function(d) {
                return d3.format(',f')(d);
              }
            },
            yAxis: {
              axisLabel: 'Y Axis',
              axisLabelDistance: -20,
              tickFormat: function(d) {
                return d3.format(',.1f')(d);
              }
            },
            dispatch: {
              renderEnd: function() {
                applyStyles();
              }
            }
          }
        };

        $scope.data = generateData();
        $scope.api = {};

        function generateData() {
          return [{
              key: 'Stream1',
              color: '#d62728',
              values: [{
                  x: 1,
                  y: 1
                },
 ...