Rotate And Wrap Text In X-Axis Labels

[intapiuser]

This post explains how to rotate and wrap text in the x-axis labels. Begin by copying the following code into the widget script. 

widget.on('beforeviewloaded', function(widget, args){

var newmaxCharactersPerLabel = 25; //Set length of the line length
args.options.xAxis.labels.maxCharactersPerLabel = newmaxCharactersPerLabel;
// args.options.xAxis.labels.y = 50; //Moves title up and down
// args.options.xAxis.labels.x = -50; // Moves titles left and right
args.options.xAxis.labels.useHTML = true;
args.options.xAxis.labels.rotation = 75; //Label Rotation
args.options.xAxis.labels.formatter = function(){
return this.value.replace(' ','<br/>')
}
})

In the script, you can adjust the length, horizontal position, vertical position, and angle of rotation of the x-axis labels. this is particularly useful when dealing with particularly long field names being used for the x-axis labels. 

To rotate the secondary xAxis, try the following next script:

var angle = 0 // you can change the angle to whatever you need
widget.on('render', function(se,ev){
  se.queryResult.xAxis.plotBands.forEach(function(band){
    band.label.rotation = angle;
  })
})