X-Tream
Posts: 12
Joined: Wed Jun 03, 2020 4:22 am

yAxis category grid columns width

Hello,

Hope you guys are doing well.

This must be a super simple question, but I just can't figure it out; How can I change width of columns in category type grids?

My issue is that the timeline gets really small if there are multiple columns in yAxis for e.g.
https://i.imgur.com/rICrcn5.png

Fiddle:
https://jsfiddle.net/2s9afb0r/

If the width can't be changed then can I for e.g. create a custom tooltip and use the labels.formatter to limit the characters?

Thank you so much for your help.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: yAxis category grid columns width

Hi,

Thanks for contacting us with your question!

You can easily change labels width at its styles and set textOverflow to 'elipsis':

Code: Select all

 labels: {
      style: {
        width: '50px',
        textOverflow: 'ellipsis',
      }
    },
Demo:
https://jsfiddle.net/BlackLabel/es2a9p8k/

You can also use a trick and use padding for changing the size of the label:

Demo:
https://jsfiddle.net/BlackLabel/qerf6o1t/

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
X-Tream
Posts: 12
Joined: Wed Jun 03, 2020 4:22 am

Re: yAxis category grid columns width

Hello,

Thank you so much for your help, that did the trick.
In my case the issue was that I didn't use the textOverflow in my initial testing. (:

Hope you and your team have a great Christmas and Happy New Year 2022!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: yAxis category grid columns width

I'm glad I could help!


Thank you on behalf of the entire Highcharts team! Merry Christmas and a Happy New Year!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Gantt”