HighChart Gantt width, xaxis, and top left gap

[po09lil]

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]

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!

[po09lil]

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]

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]

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!

[po09lil]

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]

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!