Collision

I am using datalabels on my bubble chart, but sometimes the bubbles and datalabels collide. Is there any solution to fix collision or detect when they are overlapping?

I can see that in the path chart > $datalabels > labels > [1] > [..n] > Label > _hitbox > _rect I have this

cx: 434.368
cy: 74.09599999999998
x0: 388.0193671875
x1: 481.7166328125
y0: 58.69599999999998
y1: 90.49599999999998

Should I check if there’s something overlapping there?

update

I can see a problem with this approach as the _rect isn’t updated until there has been a mouse over.

[EmilMoe]

I’m having the same issue and while I find generic or D3 solutions (here for example), they are difficult to implement for Chart.js as the algorithms aren’t simple.

I’m using a bubble chart and it’s becoming an increasingly worse issue while the amount of our data is getting bigger. Do we still have any kind of solution for this?

I switched to apex charts as they are more modern, maybe it’s fixed the

[simonbrunel]

I have been looking and seems to be nearly no public API then I can access?

No because the plugin is still in beta and I don’t want to commit on implementation details. I’m currently rewriting the whole layouting part and moved the _hitbox outside the label so your previous implementation will break at the next release.

Anyway, I’m currently looking to introduce a new option to prevent labels to overlap and I’m wondering what is your expected behavior when 2 labels overlap?