Gantt chart with ProgressBar

Is it possible to make something like that with Progress Bar? I would like to use the component for a Gantt chart.

18297699.png

Probably not, as it always starts from the very left side. You might want to look at https://vaadin.com/directory/component/so-charts which wraps Apache’s echarts which comes with Gantt support (https://echarts.apache.org/examples/en/editor.html?c=custom-gantt-flight). I don’t know full the feature set of said addon is though.

Depends on what your requirements are; ProgressBar is probably not a good fit for a generic solution, but it might be enough for what you need it for. The only way to know for sure is to try.

I’m thinking of placing tasks in the Grid with a bar showing the start and end dates of the task in the task group. The prototype is attached. I was wondering if I could manipulate the beginning of ProgressBar.
18299487.png

You could probably move the ProgressBar’s left edge with styles, but that will probably become increasingly difficult if you have anything more than a basic case. Have you considered CSS Grid? https://css-tricks.com/snippets/css/complete-guide-grid/

Many thanks for the advice and valuable information. Finally, I did my own interpretation of the Gannt chart using the Image component and the HeaderRow class to insert a timeline.
18307119.png