Additional ticks on top of automatically calculated

Dear Plotly Community,

I recently started using and enjoying plotly.js. Especially the flexibility and amount of features is incredible. I have a request I was not able to solve searching this and other forums. I only found one topic (here) which seems to be more or less what I want but unfortunately it did not get a reply. I hope you can help me with this.

My target is to add custom ticks on the x-axis. Please find my plot below.

I removed the legend and had to cut the y-axes as this data is confidential. It shows production data for a full day + current shift. As you can see I am using shapes to get a coloured background, indicating the different shifts (early, late, night). With my ultimate Photoshop skills I added vertical red lines where I want my custom ticks to be for better separation of the shifts. The formatting should be just like the regular ticks, only for highlighting I used red in my screenshots.

I am aware that I can use custom ticks like from this graphics in the tutorial section.

image

But the automatic ticks are doing a great job and I would like to keep those. I just want to add ticks on top of the automatically calculated ones and make sure those are always displayed. That should also work when zooming like shown in my next screenshot.

I also know I could use shapes, just like I did for the background, but that would not include the tick timestamp.

I hope my question is clear, if not I will be happy to clarify.

Thank you in advance
Benny