title: angular-dc Bar chart not getting rendered
body: <p>I am trying to draw a simple bar chart using crossfilter, dc.js and angular-dc. The rowchart works fine. The barchart does not render the bars. In Chrome, if I inspect, I see the values are there. and if I force focus, I do see the charts. I have tried all the suggestions but it seems that there are 3 issues:</p>
  
  <p>All the bars are starting at 0 on x-axis.
  The width of each bar is 1 px.
  Bars are not rendering on the screen.</p>
  
  <p>Can you provide me with a solution to the above question.
  I used the following link to create my barchart : <a href="https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html" rel="nofollow">https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html</a></p>
  
  <p>Is there any other link related to the bar chart using angular-dc.</p>
  
  <p>Here is the sample code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;dc.js - Pie Chart Example&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="public/lib/dcjs/web/css/dc.css"/&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/lib/d3/d3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/lib/crossfilter/crossfilter.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/lib/dcjs/dc.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="public/lib/angular-dc/dist/angular-dc.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="app"&gt;
  &lt;!-- we nicely separate the view and the data. Here, all information concerning the way to display the data
  is in the template --&gt;
  &lt;div ng-controller="myController"&gt;
      &lt;div dc-chart="pieChart"
           dc-chart-group="1"
           dc-width="780"
           dc-height="480"
           dc-inner-radius="100"
           dc-dimension="fruit"
           dc-group="fruitSales"
           dc-legend="dc.legend()"&gt;
      &lt;/div&gt;
      &lt;div dc-chart="barChart"
           dc-width="780"
           dc-height="480"
           dc-dimension="fruit"
           dc-group="fruitSales"
           dc-x="d3.scale.ordinal().domain(['','Apple','Banana'])"
           dc-xUnits ="dc-units-ordinal"
           dc-elastic-y="true"
           dc-center-bar="true"
           dc-gap="1"
           dc-bar-padding="0.5"
           dc-xAxisPadding="50"
           dc-legend="dc.legend()"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      angular.module("app", ["angularDc"]);
      myController = function($scope) {
              var fruitCf =  crossfilter([
                  {Name: 'Apple', Sales: 40},
                  {Name: 'Apple', Sales: 40},
                  {Name: 'Banana', Sales: 20}]);
              $scope.fruit  = fruitCf.dimension(function(d) {return d.Name;});
              $scope.fruitSales = $scope.fruit.group().reduceSum(function(d) {return d.Sales;});
              //$scope.$apply()
          };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>