po09lil
Posts: 4
Joined: Tue Mar 21, 2023 2:43 pm

HighChart Gantt width, xaxis, and top left gap

Hi, I am creating a gantt chart and I've ran into a couple a challenges.

1. Creating an x-axis that is divided into 3 equal parts that displays date from to date to (ex. 1/1/1999 - 1/30/1999) of that range. I am not talking about the range selector or scrollable wheel thing.
2. Filling the empty space in the top left corner of the chart with a gray background and a title that adjusts its size if the window size is adjusted
3. Expanding the width of the y-axis labels by px
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: HighChart Gantt width, xaxis, and top left gap

Hi!

Welcome to our forum and thanks for contacting us with your questions!

1. You can set xAxis.tickInterval to desired units, say month and it will display labels from that range. As for displaying only three parts, as you described, your data should be set in such way, that it divides into selected range with start and end date not exceeding it.
2. This can be achieved by using SVGRenderer rect and text methods. On initial render this element is added to chart, and on resize its position is adjusted.
3. Unfortunately, it's not possible to set yAxis.labels width with pixels, since it is calculated from length and font size of the label. You can adjust label width by setting bigger font size.

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

References:
https://api.highcharts.com/highcharts/x ... ckInterval
https://api.highcharts.com/class-refere ... derer#rect
https://api.highcharts.com/class-refere ... derer#text
https://api.highcharts.com/gantt/yAxis. ... e.fontSize

Let me know if that was what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer
po09lil
Posts: 4
Joined: Tue Mar 21, 2023 2:43 pm

Re: HighChart Gantt width, xaxis, and top left gap

Could you elaborate a little more on #1 about splitting the data? Also instead of october, I'd like something like "1/1/1999 - 1/30/1999" for each section in the xaxis.
po09lil
Posts: 4
Joined: Tue Mar 21, 2023 2:43 pm

Re: HighChart Gantt width, xaxis, and top left gap

I noticed that if the xaxis label is too long the label will become hidden when I want it to fit and show. Also in the situation when the yaxis label width changes, I need the corner title to adjust to the center position.

Thank you!
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: HighChart Gantt width, xaxis, and top left gap

By splitting the data, I meant that if you want to display 3 xAxis labels with each label ranging from 1st to last day of month, your data should fit in this bounds. For example, if you want three labels to look like this: [10/1/2020 - 10/31/2020, 11/1/2020 - 11/30/2020, 12/1/2020 - 12/31/2020] your data should fit in such date ranges.
I noticed that if the xaxis label is too long the label will become hidden when I want it to fit and show. Also in the situation when the yaxis label width changes, I need the corner title to adjust to the center position.
I have updated the solution based on your reply, check it out here: https://jsfiddle.net/BlackLabel/c89tyk3x/

Labels are automatically hidden when there is not enough space for them to render. You could override this behaviour by setting condition.maxWidth and proper styling, e.g. label width or set label rotation in chart responsive.rules. Here's a demo of responsive rules in use: https://jsfiddle.net/gh/get/library/pur ... responsive

API:
https://api.highcharts.com/gantt/respon ... artOptions
https://api.highcharts.com/gantt/respon ... n.maxWidth
https://api.highcharts.com/gantt/xAxis.labels.rotation
https://api.highcharts.com/gantt/xAxis.labels.style

Let me know if that was what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
po09lil
Posts: 4
Joined: Tue Mar 21, 2023 2:43 pm

Re: HighChart Gantt width, xaxis, and top left gap

In regards to filling the top left gap in #2 and the context where I am using this gantt chart, I won't have access to highchart helper functions like getBBox(). Is it still possible to fill in this box in without highchart helper functions and how can I do so? How can I get the x, y, width, and height values needed to achieve this?
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: HighChart Gantt width, xaxis, and top left gap

Why wouldn't you be able to use Highcharts helper functions? It's a standard function in Highcharts product and I can't think of an example why it shouldn't be available. Could you explain it a bit further, so I can come up with a solution?

Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”