Combine annotations on X & Y axis

[transreport-marley]

Hey all 👋,

First off, fantastic library - very well maintained and very versatile 👍

I've been experimenting with building an 'on call' timeline using the 'rangeBar' chart type in which we have on the Y axis a list of names, let's say ['Marley', 'Faye', 'Alex'] and on the X axis we have the minutes in a 24 hour period (in 5 minute intervals using dateTime).

During this 24 hour period, people will be 'on call' between certain hours; of which, I would like to denote by using an annotation behind the chart data - just a simple coloured block to show when they are on call.

Our series data are 'incidents', such as [{ x: 'Marley', y: [1667489400000, 1667490600000] }, ...].

As people will have different 'on call' hours I would need this annotation to be able to be set on x, x2, y and y2 - this is because if I put it on the Y axis alone, it spans the whole chart and is static in the Y axis when the chart is scrolled. If I do it on the X axis alone it will span across all names on the Y axis, which defeats the objective.

My question is; is there a possible solution where I can set the annotation on the Y axis to keep within the X axis range (x & x2 values)?

I'm using VueJS, so it's not a concern of formatting the data and passing it to the charting library - a solution on a basic rangeBar chart would suffice; it just needs to be able to scrolls and keep the annotation in the correct place.

Cheers!

[transreport-marley]

Bump

[Sotatek-HieuNguyen3]

bump

[RafaelCENG]

bump