Blank space at the end in Gantt chart

Gantt
#1

I am getting too much blank space while rendering Gantt chart. Gantt chart is taking 100% height of page, but ideally its height should be auto. It should depends on the content of chart. css Height:auto property is not working. Attached snap for ref

Blank%20space
Blank%20space1914×369 6.33 KB

#2

Hello,
There is an autosize configuration of Gantt that forces Gantt chart to automatically change its size to show all tasks without scrolling:
https://docs.dhtmlx.com/gantt/api__gantt_autosize_config.html ;
The gantt.config.autosize = "y" affects on the height of the Gantt container.
Please check the example in the following snippet:
https://snippet.dhtmlx.com/1i7kjgj4

#3

Hi,
Thanks for your response.

I have tried this property, but we are loosing scroll bar here.

My requirement is, If data is more than page size, then scroll bar should be automatically visible. And if data is less than page size then scroll bar will be hidden and gantt should consume only required height (depends on data) instead of full page.

#4

Hello,
Gantt doesn’t provide built-in functionality to do this. You can implement it in a custom solution. When you load/parse the data, you need to calculate the height of the Gantt container and compare it with your required height of the page.
You can calculate the height of Gantt container in the following way:

let containerHeight = gantt.config.scale_height + gantt.config.row_height * gantt.getVisibleTaskCount();

And you can use onBeforeDataRender handler, to set the required height of Gantt container before data is rendered on the page:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforedatarender_event.html ;
Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/y4g13zub

1 Like
#5

Thanks for your reply. I have written custom solution to calculate height of gantt control and adjusted it according to container height.