DC.js - axis margins

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<h1>Top Oil Reserves</h1>

<div id="chart"></div>

JavaScript

var chartExample = {


    initChart: function (data, countries) {

        var ndx = crossfilter(data),
            countryDimension = ndx.dimension(function (d) {
                return d.name;
            }),
            countryGroup = countryDimension.group().reduceSum(function (d) {
                return d.sale;
            }),
            chart = dc.barChart("#chart");

        chart.height(300)
            .width(800)
            .dimension(countryDimension)
            .group(countryGroup)
            .x(d3.scale.ordinal().domain(countries))
            .xUnits(dc.units.ordinal)
            .xAxisLabel("MMbbl = one million barrels")
            .yAxisLabel("Reserves (MMbbl)")
            .elasticY(true)
            //.xAxis().ticks(0);

        dc.renderAll();
    },
    initData: function () {
        var countries = ["Venezuela", "Saudi", "Canada", "Iran", "Russia", "UAE", "US", "China"];
        var allData = [{
            name: 'Venezuela',
            sale: 300
        }, {
            name: 'Saudi',
            sale: 253
        }, {
            name: 'Canada',
            sale: 150
        }, {
            name: 'Iran',
            sale: 125
        }, {
            name: 'Russia',
            sale: 110
        }, {
            name: 'UAE',
            sale: 90
        }, {
            name: 'US',
            sale: 40
        }, {
            name: 'China',
            sale: 37
        }];
        chartExample.initChart(allData, countries);
    }
};

chartExample.initData();