How to draw a complex Gantt chart in react?

Question

I am trying to build a gantt chart, wherein a single row can have multiple horizontal boxes. Something as shown in the below image. image-1.

I have explored following react packages, but seems no one is enough to draw multiple horizontal boxes in a single row as shown in the images.

Packages:

1. react-google-charts
2. frappe-gantt-react
3. react-gantt

Please do suggest some solution. Any kind of help is appreciated.

Answer 1

There is a superset of Gantt chart, called Timeline chart. That would help one to implement above mentioned chart.

Answer 2

I was able to create using recharts. https://codesandbox.io/p/sandbox/scatter-chart-with-cells-forked-d3ndsv. Hope this helps.