sayed
Posts: 13
Joined: Tue Oct 13, 2020 8:07 am

What is the best way to remove empty rows?

Hi,
I am trying to create a Gantt chart where some tasks have many activities running in the same time and this is causing other tasks to render an empty row for every missing activity
2.PNG
2.PNG (7.1 KiB) Viewed 1120 times
In the screenshot above; You can see empty space in Task1 and Task2, and I was wondering if there's a way to remove that space, so we end with this result?
3.PNG
3.PNG (6.42 KiB) Viewed 1120 times
Note: I have modified the paths of the SVG elements to reduce the space manually
https://jsfiddle.net/Sayed110/x92cfmLb/10/

Many Thanks
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: What is the best way to remove empty rows?

Hi,

Welcome to our forum and thanks for contacting us with your question.

The column heights are somehow computed automatically.

There is no make sense for me to create a series of new activities, just add a new point at the same time.
But you still care to group these activities, right?

Live demo:
https://jsfiddle.net/BlackLabel/ce35ajqg/

Other possibilities will change type yAxis to category:
https://jsfiddle.net/BlackLabel/pjde0fw3/

Let me know what you think.

Kindly regards.
Sebastian Hajdus
Highcharts Developer
sayed
Posts: 13
Joined: Tue Oct 13, 2020 8:07 am

Re: What is the best way to remove empty rows?

Hi and thanks for getting back to me.
sebastian.h wrote: Fri Dec 04, 2020 10:55 am There is no make sense for me to create a series of new activities, just add a new point at the same time.
But you still care to group these activities, right?

This might make more sense to you if I explain how we are using the gantt chart.
Let's say we have 4 water tanks and two type of activities:
1. Tank being drawn from
2. Tank being fed
assuming that at some point tank1 and tank2 will feed tank3 and tank3 will feed tank4.
In this case; we want to show 1 activity for tank1, tank and tank4
and 3 activities for tank3
4.PNG
4.PNG (10.29 KiB) Viewed 1102 times
Live Demo: https://jsfiddle.net/Sayed110/85mgp9xk/14/
Note, I don't have Task4 in this gantt.

I hope this make sense
Thanks
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: What is the best way to remove empty rows?

Hi,

Thank you for the message and clarification of the case.

There is some trick when you have categories yAxis, you need to add a break in yAxis and translate points in events.load(), let's see on example.

Live demo:
https://jsfiddle.net/BlackLabel/9rpozfuj/

API References:
https://api.highcharts.com/gantt/chart.events.load
https://api.highcharts.com/gantt/yAxis.breaks

Let me know if that was what you were looking for.
Kindly regards.
Sebastian Hajdus
Highcharts Developer
sayed
Posts: 13
Joined: Tue Oct 13, 2020 8:07 am

Re: What is the best way to remove empty rows?

Hi,
Thanks for help.
I think I can use this trick for my gantt.

Just do you have any ideas how to fix data labels position?
5.PNG
5.PNG (17.62 KiB) Viewed 1075 times
Live Demo: https://jsfiddle.net/Sayed110/j8t403Lg/1/

Many thanks
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: What is the best way to remove empty rows?

Hi,

We need to found way how to change chart.series[1].points[1].dataLabel position.
I thinking about this solution.

Kindly regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: What is the best way to remove empty rows?

Hi sayed,

Yes, I found a way to set the label, all you need is to translate the text element:

Code: Select all

chart.series[1].points[1].dataLabel.text.translate(0,-25);

Live demo:
https://jsfiddle.net/BlackLabel/4dxzcpgy/

Feel free to contact us if further help needed.
Kindly regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”