Hello,
Unfortunately, there is no built-in way to scale the chart without changing the time unit’s step. But you can implement it in a custom solution. One of the options is to create a function that will change the columns of the timeline area of the Gantt depending on the mouse wheel scroll.
You can track the number of scrolled pixels with the help of event.deltaY
property. You need to use min_column_width
property to set the width for a column in the timeline area. The article about it:
https://docs.dhtmlx.com/gantt/api__gantt_min_column_width_config.html ;
The logic of this function is to change the min_column_width
depending on the received value from the event.deltaY
property:
function onMouseWheel(event) {
let wy = event.deltaY;
let diff = wy < 0 ? 1 : -1;
let currentLevel = gantt.config.min_column_width;
let level = currentLevel + diff * 10;
if (level != currentLevel) {
currentLevel = level;
gantt.config.min_column_width = currentLevel;
gantt.render();
}
}
Note, that you need to use gantt.render
method to re-render the Gantt after changing the width:
https://docs.dhtmlx.com/gantt/api__gantt_render.html ;
Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/p5orjjaj ;
This is not a complete solution, but I hope it’ll show you a right direction.