Too much space left before x-axis in char js bar chart

Question

This is driving me crazy! need some help,

The x-axis has been moved too much from it's to be position. Need help to figure it out my code is:

$.ajax({
        type:'GET',
        url:'/xxx/xxxxx',
        dataType:'json',
        success:function(result){
            var response = { labels:[],datasets:[{label: '# of Deficiency', data: [],backgroundColor: '#00c0ef',hoverBackgroundColor: 'rgba(0,192,239,0.7)'}]};
            for (i = 0; i<result.data.length; i++){
                response.labels.push(result.data[i].title);
                response.datasets[0].data.push(result.data[i].total_deficiency);
            }
            var ctxDefRank = $('canvas[id=defRank]');
            var myChart = new Chart(ctxDefRank, {
                type: 'bar',
                data: response,
                options: {
                    scales: {
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Deficiency Rank'
                            },
                            ticks: {
                                beginAtZero:true
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                display: false
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Items'
                            },
                        }]
                    },
                    responsive: true,
                    tooltips: {caretSize:2}
                }
            });
        }
    });

The same code is executing for an another graph with less data is working perfect but with this there is a problem.