title: dc.js barChart first and last bar not displaying fully
body: <p>I have a barChart with a <code>d3.time.scale</code> x-axis. I am displaying some data per hour, but the first and last data point bars are always cut in half when using <code>centerBar(true)</code>.<br>
  (When using <code>centerBar(false)</code> the last bar disappears completely.)</p>
  
  <p>The time window is based upon the data itself and is calculated as follows:</p>
  
  <pre><code>var minDate = dateDim.bottom(1)[0]["timestamp"];
  var maxDate = dateDim.top(1)[0]["timestamp"];
  
  .x(d3.time.scale().domain([minDate, maxDate]));
  </code></pre>
  
  <p>The last line sets the time scale domain to use min and maxDate.
  This is how it looks:
  <a href="https://i.stack.imgur.com/TNUSq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TNUSq.png" alt="dc.js barChart 1"></a></p>
  
  <p>I have increased the bar width slightly using <code>.xUnits(function(){return 60;})</code> as the default is so thin that the first bar disappears within the y-axis.  </p>
  
  <p>Also I already tried to change the domain by substracting/adding one hour to min/maxDate, but this results in unexpected behaviour of the first bar. 
  <a href="https://i.stack.imgur.com/uVwmb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVwmb.png" alt="enter image description here"></a></p>
  
  <p>I used the following to calculate the offset: </p>
  
  <pre><code>minDate.setHours(minDate.getHours() - 1);
  maxDate.setHours(maxDate.getHours() + 1);
  </code></pre>
  
  <p>Is there a fix or workaround for this to add padding before the first and after the last bar?</p>