First and Last Bar is cut off on the Historical Bar Graph

[dekkofilms]

I'm just using dummy data right now, and I can't figure out why my bar chart's first bar is being cut off, and the last one being cut off in the midway point. This is my first time using nvd3/d3 and I'm just seeking some advice. I found a few github repos with open issues on this matter, but no strong solution yet.

Here is my code so far, but not much going on really:

$scope.options2 = {
  chart: {
      type: 'historicalBarChart',
      height: 276,
      x: function(d){return d[0];},
      y: function(d){return d[1];},
      showValues: true,
      legendPosition: false,
      xAxis: {
          axisLabel: 'Date',
          tickFormat: function(d) {
              return d3.time.format('%x')(new Date(d))
          },
          rotateLabels: 30,
          showMaxMin: false
      },
      yAxis: {
          axisLabel: 'Amount of Orders',
          axisLabelDistance: -10,
          tickFormat: function(d){
              return d3.format('d')(d);
          }
      },
      clipEdge: true,
  }
};
$scope.data2 = [
  {
    key: "Orders",
    bar: "true",
    values: [[1138683600000,10],[1148683600000,20],[1158683600000,15],[1168683600000,40]],
    color: '#79d8c5'
  }
];

And the output is:

JSFiddle here: http://jsfiddle.net/dekkofilms/8ke9ey1t/

[oksas]

Encountering the same thing :( Were you able to find a solution @dekkofilms?

[dekkofilms]

@oksas I don't believe we spent enough time to find a solution, we have since changed frontend frameworks and charting libraries. :/ sorry!

[rhclayto]

This is an issue with the base project nvd3. It centers the bar charts on the xAxis ticks, which are on the very edges of the chart, so half of the bars on each edge are cut off.

The solution for me was to add the following to the chart options: padData: true. This is an nvd3 option, & correctly padded the left & right bars so they were not cut off.