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!

Answer 1

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