Hi,
I am exploring ways to render Gantt chart UI as responsive and I found that below code on window resize converts the chart as responsive
window.addEventListener(“resize”, function () {
gantt.setSizes();
});
but observed Gantt chart is not responsive. Any help on creating responsive DHTMLX Gantt chart is appreciated.
Hello Mohan,
If you set the percentage sizes for the Gantt container (the width and height parameters), it will depend on the sizes of its parent node or body/html elements. When the sizes of the window or the parent element are changed, Gantt repaints itself, so the width of the timeline cells and the grid width is updated.
You can check how it works in the following snippet:
https://snippet.dhtmlx.com/edb4fdpn
Thanks for your response. I tried this but it still not responsive because the columns are hidden on smaller screens.
Hello Mohan,
The smaller screens cannot show the same amount of information as bigger screens. This is expected. You can add the horizontal scrollbar to the grid. If you resize the grid, you can still scroll scroll it and see the columns.
If you open the snippet in the mobile view, it will open without the code part, and it should be possible to use Gantt:
https://snippet.dhtmlx.com/edb4fdpn?mode=mobile
https://files.dhtmlx.com/30d/5af986a0edcfae0d6270782ce4542112/2025_06_25_12_14_05.mp4
If you expect something different, please clarify that in more detail.