X-axis labels overlap NVD3

Question

I am using NVD3 charts in my application. I fail to understand why the X-axis labels are overlapping in my graph. Can someone help me out with it?

I have tried setting number of ticks using .ticks(3), but it doesn't seem to affect the number of ticks.

        nv.addGraph(function () {
                var chart = nv.models.lineChart()
                        .x(function (d) {
                            return d[0];
                        })
                        .y(function (d) {
                            return d[1];
                        })
                        .showXAxis(true)
                        .showYAxis(false)
                        .useInteractiveGuideline(true);

                chart.xAxis     //Chart x-axis settings
                        .axisLabel('Time')
                        .tickFormat(function (d) {
                            var dateTimeFormat = '%m/%d/%Y %H:%M';
                            d = new Date(d);
                            return d3.time.format(dateTimeFormat)(d);

                        });
                chart.yAxis
                        .axisLabel('Size');
                chart.forceY([0]);

                d3.select('#id svg')
                        .datum(graphData)
                        .call(chart);

                nv.utils.windowResize(chart.update);

                return chart;
            });

Answer 1

I'm using Angular-nvD3, we can use wrapLabels:true to avoid overlapping issue.

Sample chart config.

vm.options = {
        chart: {
            type: 'discreteBarChart',
            x: function(d){return d.label;},
            y: function(d){return d.value;},
            wrapLabels:true
        }
    };

Screen shot: