No horizontal scrollbar in React Gantt Chart

WalkingPilot

Hi SVAR team,

I'm using React Gantt in a chart-only configuration:


I managed to fix a previous scrolling issue by wrapping the component in a dedicated container:

<div className="gantt-container">
  <Willow>
    <Gantt ... />
  </Willow>
</div>

The chart now scrolls correctly both vertically and horizontally.

Current issue

The horizontal scrollbar only becomes visible when I scroll all the way to the bottom of the task list.

In other words:

Vertical scrollbar is always visible ✅
Horizontal scrolling works ✅
Horizontal scrollbar exists ✅
Horizontal scrollbar is only visible when reaching the bottom of the chart ❌

This makes navigation difficult when there are many rows, because I have to scroll to the bottom first before I can grab the horizontal scrollbar.

Question

Is there a supported way to make the horizontal scrollbar remain visible at the bottom of the viewport?

Ideally I would like behavior similar to:

Data grids with a fixed horizontal scrollbar
Sticky horizontal scrollbars
Split vertical/horizontal scrolling containers

Additional observation

While reviewing the API I noticed the render-data action:

api.on("render-data", ({ from, start, end }) => {
console.log(start, end);
});


which seems related to viewport rendering during scrolling. Could this functionality be used to keep the horizontal scrollbar attached to the visible viewport instead of the bottom of the entire chart content? [\[docs.svar.dev\]](https://docs.svar.dev/react/gantt/guides/appearance/)

Or is there another recommended approach for this scenario?

Thanks!

tasha

Please check this example: https://snippet.svar.dev/react/OX44Qi0A8
Please add this css to the containter to fix the problem (Gantt.css file in the example):

.gtcell.wx-vkht5Uhi {
  height: calc(100% - 50px);
  border-top: var(--wx-gantt-border);
}

By setting this css you’re giving the Gantt container a fixed height based on the viewport (assuming the parent container of .gtcell.wx-vkht5Uhi has a defined height, for example , 100vh or a flexlayout). This forces the Gantt’s internal scroll container to respect that height. The horizontal scrollbar then appears at the bottom of that fixed-height container, which stays visible even when you’re scrolled to the top of the task list.