chrisb89
Posts: 27
Joined: Thu Jan 16, 2020 9:45 am

Gantt: How to show several milestones in one row?

Dear all,

In the given demo, the gantt chart shows milestones in separate rows: https://jsfiddle.net/gh/get/library/pur ... milestones

However, to get a more compact gantt, I would like to show activities and multiple milestone in the same row. Looking at the API, I thought the y-values could help as shown here, but that does not seem to work: https://jsfiddle.net/o2s6cgad/1/

How can I get multiple milestones to be displayed in the same row?

Thanks,
Chris
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Gantt: How to show several milestones in one row?

Hello chrisb89,

We appreciate you reaching out to us!

Surely you can have multiple milestones in the same row. You only need to define your points in separate series and set yAxis.uniqueNames to true.

API references:
https://api.highcharts.com/highcharts/yAxis.uniqueNames

Simple demo:
https://jsfiddle.net/BlackLabel/oyh4Lmat/

Let me know if that was what you were looking for!
Best regards.
Dominik Chudy
Highcharts Developer
chrisb89
Posts: 27
Joined: Thu Jan 16, 2020 9:45 am

Re: Gantt: How to show several milestones in one row?

Dear Dominik,

thanks for your quick response. That's not quite what I was looking for. We have a very high number of activities and milestones. For a compact view, I would like to draw milestones at least in the same row (left part of the attachment) and ideally even over some of the activities (right part of the attachment).
Bildschirmfoto 2020-09-08 um 06.59.04.png
Bildschirmfoto 2020-09-08 um 06.59.04.png (56.92 KiB) Viewed 3210 times
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Gantt: How to show several milestones in one row?

Hello again!

All right, now I understand you much better. We only need to add a few more series and remember about insertion order. In this case, we don't have the zIndex property in our API so we need to firstly add activities and then milestones.

Demo:
https://jsfiddle.net/BlackLabel/jcdma83r/

Please let me know if it meets your expectations!
Best regards.
Dominik Chudy
Highcharts Developer
chrisb89
Posts: 27
Joined: Thu Jan 16, 2020 9:45 am

Re: Gantt: How to show several milestones in one row?

Dear Dominik,

thanks, almost there. From your fiddle, I understand that I need to set

Code: Select all

yAxis.uniqueNames=true
in order to get this result. So I guess, the insertion order is irrelevant.

The only thing I don't like is the increased row height. Thought I could use something like

Code: Select all

staticScale: 5
. This setting fixes the row height but decreases the size of milestone symbols. Is there a better way to get that done?

https://jsfiddle.net/eLr5py7g/1/

Thanks for your help,
Chris
chrisb89
Posts: 27
Joined: Thu Jan 16, 2020 9:45 am

Re: Gantt: How to show several milestones in one row?

just realized, this is a known bug: https://github.com/highcharts/highcharts/issues/11807

Still no woraround for this? I am using highcharts 7.1
karolkolodziej
Posts: 895
Joined: Mon Mar 02, 2020 10:11 am

Re: Gantt: How to show several milestones in one row?

That is right.
However, you can try to do some tricks as I did it in the demo below using the brake and the translate method.
API:
https://api.highcharts.com/gantt/xAxis.breaks
https://api.highcharts.com/class-refere ... #translate

Live demo: https://jsfiddle.net/BlackLabel/3fdkm7px/

Let me know what you think about this solution.
Regards!
Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Re: Gantt: How to show several milestones in one row?

Someone over on StackOverflow posted an answer (https://stackoverflow.com/a/50042063/988264) that shows, IMHO, a better way to do this.

If you do what you would do for a regular X range chart and set up

Code: Select all

yAxis: {
    type: 'category',
    categories: ["X", "Y", "Z"],
    reversed: true
}

and then specify your milestones to have a y value matching the index of the category you want it to show up under, then you can let it keep it's true unique name of that particular milestone.

If you do what's suggested here, setting

Code: Select all

yAxis: {
    uniqueNames: true
}

forces you to set every milestone's name property to match the row that you want it to show up in, which means that in order to see the milestone's actual name, you have to add a custom property to it and then override the tooltip formatter to use your custom property.

Also, doing it by setting uniqueNames: true seems to do something funky with the range selector - all the different "rows" are just mashed on top of each other, showing only one multi-colored row in the range selector, whereas if setting up the yAxis to use categories, the range selector handles the categories perfectly, and each category shows up as it's own row in the range selector also, so you see a more accurate mini-map.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Gantt: How to show several milestones in one row?

Hello Dylan Cristy!

Thanks a lot for sharing ​a different solution on our forum. It might be useful knowledge for future users and I appreciate it a lot. :)

Best regards
Dominik Chudy
Highcharts Developer

Return to “Highcharts Gantt”