How to change style to progress?

[insider73]

How can I change the styles for progress, for example I want the indicator to only be height: 50%

[ramil]

Hello Viktor,
You can change the height of the progress bar element by changing the style rules for the gantt_task_progress_wrapper selector:

.gantt_task_progress_wrapper{
  height: 50%;
}

Here is an example:
https://snippet.dhtmlx.com/co9ljrlc

[insider73]

Hello Ramil!

Within a task I need to dynamically change the progress height. For example, through task_text I added other progress scales to the same task, but I still didn’t understand how to influence .gant_task_progress

I had to put a task_text class on top to hide the progress part, but I don’t like this solution, is there any way to fix this?

At the same time, I have cases when the main progress should fill the entire height

[ramil]

Hello Viktor,
The task progress element is displayed over the task bar, but below the task text element:

If you need to display several progress bars depending on different conditions, I think it should be better to not use the built-in progress bar at all. Then you will be able to add the HTML elements and styles you need.

Alternatively, you can use the addTaskLayer method that allows showing any HTML elements in the timeline:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html

There is an example of the implementation with up to 4 baselines displayed below tasks:

DHTMLX - Gantt. Show several baselines

It is different from the progress bars, but it may serve the same purpose.