CurlyError
Posts: 3
Joined: Tue Nov 28, 2023 4:22 pm

Gantt with custom height based on value and capacity

I am trying to create a Gantt chart for displaying the Employees on the Y-Axis and the content of the chart would be their assignments to projects. Each assignment has a `startDate`, an `endDate`, and a `hoursPerWeek` value which can be a number from 1 to 40.

As one employee can be assigned to different projects, I want to show the projects for each employee without overlapping. I also want to use the number of hours to visually show the allocation. So the height should change based on the value to take a specific percentage on the Employee row.

I know that I'm writing something really specific, but I was not sure how to explain it in a more general way. Is this possible somehow?
jakub.s
Site Moderator
Posts: 1543
Joined: Fri Dec 16, 2022 11:45 am

Re: Gantt with custom height based on value and capacity

Hi,

Welcome to our forum & thanks for the question!

There's no way to modify the points' height based on another property with a simple Highcharts config.

In order to do that you would have to modify a Highcharts Gantt method responsible for drawing the points - you will have to take a lot of other factors into account (like scaling the yAxis, ticks, etc.)

Here's just a snippet that should help you: https://jsfiddle.net/BlackLabel/o7jr3pya/

There, you have access to the current path of the rectangle; if you calculate a new path of your Gantt's point based on the third property, you can easily update the path with a new value.

Let me know if that helps.

Best regards!
Jakub
Highcharts Developer
CurlyError
Posts: 3
Joined: Tue Nov 28, 2023 4:22 pm

Re: Gantt with custom height based on value and capacity

Hi,

Indeed, that was really helpful. There is still I need to achieve, but at least I was able to change the height dynamically based on your example. I didn't quite created a new path, but only changed the height. Probably, I might need to create a new path to completely achieve what I want.

https://jsfiddle.net/q0vj83f6/2/

Thanks a lot.
jakub.s
Site Moderator
Posts: 1543
Joined: Fri Dec 16, 2022 11:45 am

Re: Gantt with custom height based on value and capacity

Hi,

Thanks! I'm glad it helped.

Let me know if you have any more questions.

Kind regards!
Jakub
Highcharts Developer
CurlyError
Posts: 3
Joined: Tue Nov 28, 2023 4:22 pm

Re: Gantt with custom height based on value and capacity

Hi again,

Is there a way to achieve the same/similar thing using Highcharts React?
jakub.s
Site Moderator
Posts: 1543
Joined: Fri Dec 16, 2022 11:45 am

Re: Gantt with custom height based on value and capacity

Of course! That's not a problem at all.

You can override this function the same way in your React project. You can do that in your index.js when you are initializing your Highcharts project.

If you have an online demo and something does not work as expected, I will be happy to take a look and guide you towards a solution.

Regards!
Jakub
Highcharts Developer

Return to “Highcharts Gantt”