Dhtmlx gantt chart small width

Gantt
#1

Hi,

I have a gantt chart with the width is 156px , and it shows ‘Duration’ column, when I scroll, the other columns such as : ‘Start time’, ‘Duration’, ‘+’ , … doesn’t show
Can you here please help me how the other columns such as : start time, duration, … show when scrolling
Everything is normal if I set the width is 100%

I’m using gantt chart in angular 9

My html is :
<div id="gantt_here" style="width:156px;"></div>

My angular component is :

    export class GanttComponent implements OnInit, OnDestroy {
      constructor() { }

      ngOnInit(): void {
          const taskData = {
            data: [
              {id: '10', text: 'Project #1', start_date: '01-04-2025', duration: 3, progress: 0.4, open: true},
              {id: '1', text: 'Task #1', start_date: '02-04-2025', duration: 2, progress: 0.6, parent: '10'},
              {id: '2', text: 'Task #2', start_date: '01-04-2025', duration: 2, progress: 0.6, parent: '10'},
              {id: '20', text: 'Project #2', start_date: '01-04-2025', duration: 3, progress: 0.4, type: 'project', open: true},
              {id:  '3', text: 'Task #3', start_date: '02-04-2025', duration: 2, progress: 0.6, parent: '20'},
              {id: '4', text: 'Task #4', start_date: '01-04-2025', duration: 2, progress: 0.6, parent: '20'}
            ],
            links: [
              { id: 1, source: 1, target: 2, type: '0'},
              { id: 2, source: 2, target: 3, type: '0'},
              { id: 3, source: 3, target: 4, type: '0'},
              { id: 4, source: 2, target: 5, type: '0'}
            ]
          };
          gantt.config.columns = [
            {name: "text", tree: true, width: 170, resize: true},
            {name: "start_date", align: "center", resize: true},
            {name: "duration", label:"Duration", resize: true},
            {name: "add", width: 44}
          ];
      
          gantt.init('gantt_here');
      
          gantt.parse(taskData);
      
          const onTaskClick =
          gantt.attachEvent('onTaskClick', (id) => {
            gantt.message(`onTaskClick: Task ID: ${id}`);
            return true;
          }, '');
          eventIDs.push(onTaskClick);
        
      }

      ngOnDestroy(): void{
        
        gantt.clearAll();
      
        eventIDs.forEach(event => gantt.detachEvent(event));
        eventIDs = [];
      
        const tooltips = <HTMLElement[]><any>document.querySelectorAll('.gantt-info');
        tooltips.forEach(tooltip => tooltip.style.display = 'none' );
        
      }

    }

Thanks,

#2

Hello Hoangle,
By default, the grid is not scrollable. Moreover, with the small Gantt container size, the grid doesn’t change its default width. We are aware of that issue. The dev team will fix it in the future, but I cannot give you any ETA.

To make the grid scrollable, you need to change the layout configuration:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html
Here is an example:
https://snippet.dhtmlx.com/5/ca238ba88

Here are examples where you can make Gantt more responsive:
http://snippet.dhtmlx.com/5/adf41070a
http://snippet.dhtmlx.com/5/326d24340

1 Like
#3

Hello Hoangle,
The dev team fixed the bug with the Gantt container resize. Now, the vertical scrollbar should be visible even when the grid doesn’t fit the Gantt container width:
https://docs.dhtmlx.com/gantt/whatsnew.html#716
You can see that the bug is no longer reproduced in the following sample:
https://snippet.dhtmlx.com/5/4fde31b1d