DC JS: remove outer padding for line charts with an ordinal scale x-axis?

Viewed 521

I built a line chart using DC JS with an ordinal x-axis. It works, except that there is some outer padding on the x-axis that I can't seem to get rid of. I'd like the left-most and right-most data points to be flush with the edges of the chart, with no padding. Hopefully I'm not missing something obvious.

I think I'm setting up the x-axis scale incorrectly. Given a data set like this:

var data = [
  { key: 'Monday', value: 3000000 },
  { key: 'Tuesday', value: 3100000 },
  { key: 'Wednesday', value: 3500000 },
  { key: 'Thursday', value: 3070000 },
  { key: 'Friday', value: 4500000 },
  { key: 'Saturday', value: 3003030 },
  { key: 'Sunday', value: 5010000 }
];

Here's what I'm doing with the x-axis scale:

var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]);
chart.x(ordinalScale).xUnits(dc.units.ordinal);

I've also looked at the D3 documentation on ordinal scales, but that hasn't helped yet.

Here's a screen shot (extraneous padding marked in red): http://imgur.com/a/zmfF4

Here's a working JS fiddle that demonstrates the problem: https://jsfiddle.net/qvp4fpzy/4/

1 Answers
Related