Background event on Highcharts Gantt

Question

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

Sandbox: https://codesandbox.io/s/nice-microservice-fuv76?file=/src/GanttMain.jsx

Here is a screenshot of the old Gantt with Fullcalendar :

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 ?

Thanks!

Please provide the code and some sample data - see how to create a [mcve]. — Marco Aurelio Fernandez Reyes, May 31 '21 at 20:58
Hi @Minos, What do you exactly mean by `display events in "background" mode which passes under the jobs`? — ppotaczek, Jun 01 '21 at 09:06
@ppotaczek Sorry, maybe my translation is a bit bad. I'm just trying to create events of my unavailability displayed behind the job events, as if there was a zindex of differences, as on the first screenshot, the grey slots are background events — Minos, Jun 01 '21 at 11:28

score 0 · Answer 1 · answered Jun 02 '21 at 08:01

0

You need to use plot bands for x-axis:

xAxis: {
  ...,
  plotBands: [
    {
      from: 1613361600000,
      to: 1612841640000,
      color: "gray"
    }
  ]
}

Live demo: https://codesandbox.io/s/misty-moon-nx4y-nx4y8?file=/src/GanttMain.jsx

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

answered Jun 02 '21 at 08:01

ppotaczek

36,341
2
14
24

Yes I have seen this api, but the problem is that the plot bands fill the whole height of the gantt. I need something that can be adapted to each resource, because they are all independent. Sometimes you can have an unavailability on a whole cell but not the others, and sometimes an unavailability on a workstation for a few hours. – Minos Jun 03 '21 at 06:12
Hi @Minos, In this case you need to use polygon series: https://codesandbox.io/s/misty-moon-nx-vfjs4?file=/src/GanttMain.jsx or render custom shapres by `Highcharts.SVGRenderer` class: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect – ppotaczek Jun 04 '21 at 12:47
1

Ok I will look at the polygons series thank you very much. I was also told about the SVGRenderer, I have another project in progress, I cannot yet test well but this solution seems correct to me if I manage to convert the axes to hours to define a width, and the position to Y ... I'll test! – Minos Jun 05 '21 at 08:45

Background event on Highcharts Gantt

1 Answers1