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>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<div id="chart"></div>

JavaScript

var chartExample = {
    
     
    initChart: function (allCodes, data) {

        var ndx = crossfilter(data),
            runDimension = ndx.dimension(function (d) {
                return d.run;
            }),
            openActionCountGroup =  runDimension.group().reduceCount(),
            chart = dc.barChart("#chart");

    chart
    .x(d3.scale.ordinal().domain(allCodes))
    .height(300)
    .width(300)
    .margins({left: 50, right: 30, top: 0, bottom: 4000})
    .xUnits(dc.units.ordinal)
    .yAxisLabel("Number of actions")
    .elasticY(true)
    .dimension(runDimension)
    .group(openActionCountGroup, "Open")
    .colors(["#00FF00","#FFFF00", "#FF0000"])
    .colorAccessor(function(d, i){
        if(d.data.value < 500)
            return 2;
        else if(d.data.value < 1000)
            return 1;
        else return 0;
    });
        
        dc.renderAll();
    },
    initData: function () {
        var codes = ["MR001", "MR002", "MR003"];
        var allData = [];
        for(var i = 0; i < 4000; i++)
        {
           var datum = {run: "", open: true};
           var runHelp = Math.floor(Math.random() * 100);
           if(runHelp < 80)
               datum.run = codes[1];
           else if(runHelp < 95)
               datum.run = codes[2];
           else datum.run = codes[0];
           var openHelp = Math.floor(Math.random() * 100);
           if(openHelp < 2)
               datum.open = false;
           allData.push(datum); 
        }
        chartExample.initChart(codes, allData);
    }
};

chartExample.initData();