Rotate and Wrap Text in X-Axis Labels
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.
-
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!!
-
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):
-
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 -
Diego Cordero thank you for this script! I've been trying to figure out how to do this FOREVER
Please sign in to leave a comment.
Comments
9 comments