MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Background event on Highcharts Gantt

Mon May 31, 2021 5:51 pm

Here is for a project we used before FullCalendar in resourceView mode to display gantt a from an algorithm. In this gantt we have jobs, as well as the display of the unavailability of resources (workstation here), they can be irregular, therefore to be placed for each resource.

Here is a screenshot of the old Gantt with Fullcalendar :
Screenshot_4.png
Screenshot_4.png (49.12 KiB) Viewed 253 times
We changed for Highcharts for the reactivity and especially the reordering which will be simpler with Highcharts, only I do not know if it is possible, and if yes how, to display events in "background" mode which passes under the jobs. Would you have a solution for me ?

Here screenshot of highcharts gantt currently :
Screenshot_6.png
Screenshot_6.png (70.01 KiB) Viewed 253 times
Thanks !

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

Re: Background event on Highcharts Gantt

Tue Jun 01, 2021 11:08 am

Hi,
Thanks for contacting us.

I must ask you about details, this vertical gray background at the chart are your events?

It will be helpful if you send me your example for testing in online code editor.

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Tue Jun 01, 2021 11:32 am

sebastian.h wrote:
Tue Jun 01, 2021 11:08 am
Hi,
Thanks for contacting us.

I must ask you about details, this vertical gray background at the chart are your events?

It will be helpful if you send me your example for testing in online code editor.

I'm waiting for news from you.
Best regards.
Yes on FullCalendar, the grey vertical bars are events, just like the colored bars, attributed to resources (coming from API), I'm looking to be able to create those same grey vertical bars on highcharts, no matter how.

Here sandbox from my gantt highcharts currently : https://codesandbox.io/s/nice-microserv ... ttMain.jsx

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

Re: Background event on Highcharts Gantt

Wed Jun 02, 2021 10:00 am

Hi,
Thanks for the message.

I think a possible approach will be rendering custom background in a place where you want.

You need to find an item in your row and draw a gray rectangle there.
Here is an example where I render a custom background in a cell using SVGRenderer.

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

API References:
https://api.highcharts.com/class-refere ... VGRenderer

Best regards.
Sebastian Hajdus
Highcharts Developer

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Thu Jun 03, 2021 6:15 am

sebastian.h wrote:
Wed Jun 02, 2021 10:00 am
Hi,
Thanks for the message.

I think a possible approach will be rendering custom background in a place where you want.

You need to find an item in your row and draw a gray rectangle there.
Here is an example where I render a custom background in a cell using SVGRenderer.

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

API References:
https://api.highcharts.com/class-refere ... VGRenderer

Best regards.
Hi Sebastian,
Thank you for your answer.

It's exactly what I'm looking for, now I'm going to try to work a little to convert a start - end date duration, to be able to display it as I want...
I just don't understand how to assign it precisely on a line.

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

Re: Background event on Highcharts Gantt

Fri Jun 04, 2021 7:59 am

Hi,
I have another idea, maybe use xAxis.plotBands will work in your case?

API References:
https://api.highcharts.com/gantt/xAxis.plotBands

Best regards.
Sebastian Hajdus
Highcharts Developer

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Sat Jun 05, 2021 8:47 am

sebastian.h wrote:
Fri Jun 04, 2021 7:59 am
Hi,
I have another idea, maybe use xAxis.plotBands will work in your case?

API References:
https://api.highcharts.com/gantt/xAxis.plotBands

Best regards.
Hi,
I had already looked at the plotBands but from what I understood they are displayed over the entire height of the gantt, but each Y axis resource can have a small downtime of a few hours without it being on all of them, therefore impossible to do like that, unless it is possible to assign a plotband to a specific resource ...

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 7:28 am

Hi Sebastian,
I think I found a way to do what I want with the SVGRenderer.
I'm missing just one information, is it possible to disable the parent collapse on click?
Indeed as the SVG are put in pixel in chart, if I collapse it's not ok anymore...

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

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 10:11 am

Hi,
You can use series.gantt.data.collapsed to set collapsed points after chart will rendered.

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

API References:
https://api.highcharts.com/gantt/series ... .collapsed

Let me know if it's the approach fit you.
Best regards.
Sebastian Hajdus
Highcharts Developer

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 10:41 am

sebastian.h wrote:
Mon Jun 07, 2021 10:11 am
Hi,
You can use series.gantt.data.collapsed to set collapsed points after chart will rendered.

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

API References:
https://api.highcharts.com/gantt/series ... .collapsed

Let me know if it's the approach fit you.
Best regards.
Hi,
Thank you for all your answers.
I've seen this api, but I'm looking for something to prevent the user from being able to collapse the parent, is this possible?

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

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 11:45 am

Hi,
Another topic from a forum about detection, you will find their nice solution from a user.
viewtopic.php?f=9&t=46620&p=167411#p167291

Have look at this example, inside the wrapper it's function detecting click and mouse positions.
https://jsfiddle.net/BlackLabel/Lkdfx70y/

Best regards.
Sebastian Hajdus
Highcharts Developer

MinosGFX
Posts: 8
Joined: Fri May 28, 2021 7:58 am

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 12:10 pm

sebastian.h wrote:
Mon Jun 07, 2021 11:45 am
Hi,
Another topic from a forum about detection, you will find their nice solution from a user.
viewtopic.php?f=9&t=46620&p=167411#p167291

Have look at this example, inside the wrapper it's function detecting click and mouse positions.
https://jsfiddle.net/BlackLabel/Lkdfx70y/

Best regards.
Thank you very much, I will look at

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

Re: Background event on Highcharts Gantt

Mon Jun 07, 2021 12:26 pm

You're welcome!
If you have a question, feel free to contact me at any time.

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”