Angularjs NVD3 Custom X Axis

I have the following plunker where I want to put X Axis labels on the next line. I have the following configuration in my controller to set up the x axis, but it doesn't work.

xAxis: {
    axisLabel: 'X Axis',
    tickFormat: function(d){
        var words = d.split(' '),label = '';

        for (var i=0; i< words.length; i++) {
            label += words[i] + "\n"; // does not work either
            // label += "<tspan class='x'>" + words[i] + "<tspan>"; // does not work either
        }

        return label;
     }
 }

      

        
        
        
      

    

How to make the code such that the x-axis does not overlap the labels. I am looking for the same result as this one , but I could not figure out how to apply this logic without touching the NVD3 directive I am using. Is it possible?