Rotate and Wrap Text in X-Axis Labels

Comments

8 comments

  • Avatar
    Alina Lotman

    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
  • Avatar
    Ed DiCosmo

    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
  • Avatar
    Nick Burleigh (Edited )

    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
  • Avatar
    Delsaran Bigglesworth

    Thank you Ed, spent days looking for this.

    0
    Comment actions Permalink
  • Avatar
    GEHC Large Dev

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

    2
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

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

    1
    Comment actions Permalink
  • Avatar
    Diego Cordero

    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

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Thank you. I've give this a try.

    0
    Comment actions Permalink

Please sign in to leave a comment.