Rotate and Wrap Text in X-Axis Labels

Follow

Ed DiCosmo

March 23, 2017 21:37

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. 

2

• 

  Alina Lotman June 20, 2017 17:45

  Hi Ed,

   

  Thanks for posting this -- this is a great functionality!

  Do you know how we can modify the script to have this functionality with a two categories xAxis?

  I tried adding the array position xAxis[1] similar to what was used in this post for the yAxis but that didn't seem to work: https://support.sisense.com/hc/en-us/community/posts/221227228-Column-and-Line-Chart-Formatting

  Any ideas?

  Thanks!!

  0

  Comment actions Permalink
• 

  Ed DiCosmo July 05, 2017 21:04

  Thanks Alina!

  Try using the code below.

   widget.on('render', function(widget,args){
  
  
  var plotbands = widget.queryResult.xAxis.plotBands;
  
  $.each(plotbands, function(){
   this.label.rotation = 90;
   })
  })

  1

  Comment actions Permalink
• 

  Nick Burleigh July 20, 2017 15:28 (Edited July 20, 2017 15:29)

  Thanks, Ed! I was interested in just the text wrapping. This seems to work great on larger widgets & larger screens, but breaks down with smaller widgets/screens. Please see photos below. Any idea why this is happening? Ideally I need the text wrapping to work regardless of screen size, without affect the labels this way.

  Nick

  Large screen (external monitor):

  Same widget, small screen (laptop):

  

  0

  Comment actions Permalink
• 

  Delsaran Bigglesworth November 05, 2018 15:47

  Thank you Ed, spent days looking for this.

  0

  Comment actions Permalink
• 

  GEHC Large Dev July 11, 2019 02:09

  Can you help with text wrapping in the secondary x-axis?

  2

  Comment actions Permalink
• 

  Delsaran Bigglesworth July 22, 2019 14:00

  How would you do this for the secondary x-axis?

  1

  Comment actions Permalink
• 

  Diego Cordero September 10, 2019 10:47

  Hi GEHC and Delsaran,
  
  

  I managed to rotate the secondary xAxis with the 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;
    })
  }) 

   

  Best,
  Diego

  1

  Comment actions Permalink
• 

  Delsaran Bigglesworth September 10, 2019 11:47

  Thank you. I've give this a try.

  0

  Comment actions Permalink
• 

  Scale Media February 12, 2020 20:54

  Diego Cordero thank you for this script! I've been trying to figure out how to do this FOREVER 

  0

  Comment actions Permalink

Please sign in to leave a comment.