✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Can't display Age correctly

The linked codepen shows a simple example of my problem.

I have a number of event dates down to day resolution which I want to display as the age of the person which I achieve by normalising relative them to the year 2000. This means that plotly’s zoom, axis & hover functionality all work pretty well as it knows how to handle the dates.

At the default zoomed out year only view, the axis & hover labels are fine. However, zooming in around Frances & Raif, you can see that it shows Frances as 9y 12m when it should be 9y 11m. Similarly, Raif should be 10y 0m in January. The xaxis label also shows as 10y 1m instead of 10y 0m.

The problem is that the date format is 1-based not 0-based for months and days and can’t be easily changed.

Most data I’ve seen for ages just uses the year component but in my case the month & day component gives valuable information as more data is added to the plot.

How can I get the plot axis label, hover label & zoom functionality to work with my data?

simplified example