Chart height not rendered correctly


I am trying to use functional component instead of Class component to use Gantt.

I have followed the FAQ in here to set the CSS (html, body). Which works if I did not place (the following)


inside useEffect.

However, doing so, I am not able to see my toolbar.

After reading up more on React functional component, and hooks, I realise that gantt.init should have been inside useEffect instead (correct me if I’m wrong). So I placed it there, and now the toolbar is showing but the chart becomes 0 height.

I have tried to set the container height in CSS but to no avail.

I have setup a GitHub repo for this.

Let me know how I can adjust the CSS or something which would render the view correctly.


Hello Joseph,
Thank you for sharing your project.
I don’t specialize in React so I won’t be able to tell you how it should work.
But I can suggest that you can specify Gantt height in CSS:

  height: 500px;

When Gantt height is 100% it checks the parent height parameter. When there is no parent, that parameter is 0.

It works. But I don’t really get what you meant here. Is there any example you can provide to further explain it?

I did try to wrap a parent div before the #gantt but it doesn’t render correctly as well.

Also, what are the other way to use full height instead of specifying the px? E.g using %
Using pixel doesn’t seem flexible enough.

Hello Joseph,
Here are the explanation and example:

You can change that if you add the following rule:


1 Like

Hi ramil,

From your example, I can see and understand clearly, but when I tried it on my project, it just doesn’t work as I intended.

If you pull again my latest commit to my GitHub, I have set html, body to 100%. Added a #toolbar with a height of 100px then I want the chart to take the rest of the height. So I tried a couple of way; setting 100%, or auto does not work. It will collapse to 0px height. The only way it works is that if I use px to specify the height.

Can tell me why is that so? And how do I achieve the result that I want without specifying a fixed px height for the chart.

Hello Joseph,
Looks like, it happens because React requires more complex structure than a regular HTML page.
You can add the following rule to the custom.css file:

#gantt {
    height: 100%;

Then you need to wrap Gantt into a div that will have 100% width and height and absolute positioning:

<div style={{width: '100%', height: '100%', position: 'absolute'}}>
    <GanttChart />

Here is the updated demo:

Hello ramil,

Thanks for looking into it. It’s almost perfect but I don’t get why it would cause double scrolling to appear.

I tried to remove toolbar but this is still showing.

This is the full page w/o toolbar.

And with toolbar, the scroll will just move downwards.

Why is there a double scrollbar at the bottom?

Hello Joseph,
Looks like, it happens because there is margin for the body element. So when Gantt stretches its width to 100% of the page, it doesn’t fit the screen. If you remove the margin, the second scrollbar disappears:

	margin: unset;

Hey ramil,

Really appreciate your help. It looks good now, just that it got push down because of the toolbar I have, but that’s fine for now.