Unable to draw a line behind a Point in v3.0.11-beta

Expected Behavior

When using a mouseLine plugin I would expect that the line appears behind the dot/pointer when it is active.

Current Behavior

The drawn line appears above the pointer like so

Steps to Reproduce

I’ve got a working comparison between v2 and v3 below, all that’s really changed in the plugin is the different references to the chart object needed to draw the line.

Issue in v3 https://codepen.io/stugoo/pen/Rwozbyd

Issue not present in v2.9 https://codepen.io/stugoo/pen/WNoBVML?editors=1010

Context

I recently upgraded ChartJS to version 2.9.4 to patch the security hole. I’m also using the chartjs-annotations-plugin which is not compatible with 2.9.4, so not wanting to revert a security patch I am upgrading our application to use ChartJS v3 beta.

I had a look at doing this as a custom Chart type but I was unable to get the line to draw behind the Point as it was in v2.9.4

Environment

• Chart.js version: 3.0.0.11.beta
• Browser name and version: Chrome

[stugoo]

@kurkle this works perfectly for my use case. Thank you so much! Awesome support and a great library, appreciate all the work you’re doing on the v3 build. Also thanks to @etimberg for your input also.

Happy to mark this issue as resolved. 😄

[kurkle]

That is actually quite a lot easier solution. It will not work with semi-transparency properly, because the element is drawn multiple times, but if using solid colors, its fine.

You can redraw the active elements easily after the line:

chart.getActiveElements().forEach(el => el.element.draw(ctx));

https://codepen.io/kurkle/pen/dyOBgVm