Mid align axisX in a plot

Community help
1

I build a gantt timeline using plot in this notebook - Vacation Gantt / hashg | Observable

I’m trying to add 2 plot.axisX to this plot

  1. representing the month
  2. Representing Date & Day of the week.

I’m able to get the Date & Week rendered.

But I’m having challenge representing the month above it. Similar to this representation.

Screenshot 2023-04-14 at 21-38-05 Vacation Gantt w_ Holidays - no grouping _ hashg Observable
Screenshot 2023-04-14 at 21-38-05 Vacation Gantt w_ Holidays - no grouping _ hashg Observable1160×413 16.8 KB

Thanks in advance.

2

It’s possible, but pretty tricky, to do exactly what you’re describing. You’ll need to do some date math using d3-time to compute the middle of the months, intersected with the domain of your data. I’ve compiled a few techniques that might be relevant for you here:

An easier place to start might be to just label the start of the months with a separate axis or a multi-line tick format.