Drawing "Pins" on a Line Chart

Our team is trying to place pins on a line chart that represent events in time. If there are multiple events on a single day we want to show how many events. Originally we tried to use shapes to render the circles, but those came with their own complications. So we used a scatterplot trace where the Y values are all the same.

Here’s an example of what it looks llike:

While it works nicely there, if the pins are more dense it becomes illegible, like this:

Is there any way to prevent the text for each circle from bleeding into another circle?

What I’m doing now is checking whether or not the distance between two pins is too close. This takes some hacky work, but it’s better.

I take the width of the plot and slice it up by the range of my x-axis (slice = width(plot) / (range[1] - range[0])). I then take the radius of the marker and divide it by the size of 1 slice (maxOverlap = radius(marker) / slice)

Then I check if two points are closer than maxOverlap and, if they are, I make the previous pin’s text null

To find the width of the plot I do cartesian = svg.querySelector('.cartesianlayer'), then grab yaxs = cartesian.querySelector('.cartesianlayer') and plot = cartesian.querySelector('.plot'). If they both exist I grab their .right values from .getBoundingClientRect() (axisRight = yaxis.getBoundClientRect().right) I then subtract plotRight - axisRight to get my width (I hope someone sees this and tells me I’m being dumb and that there’s a better way to get this information…)

It seems to work, but it feels SUPER hacky.