Chart.js plugins overlapping tooltips

Question

I have two plugins, one which displays a horizontal line across a chart (example image show below) and one which displays a label inside a donut chart. In both cases when the tooltip is triggered for the base chart, it displays beneath (i.e. lower z-position) the plugin's drawing.

I know I can create a fully customized tooltip which might solve this problem, but wanted to know if there was a configuration I'm not seeing or a simpler solution.

I can post code if necessary, but didn't think it'd be useful.

Answer 1

I believe that you should have posted the code for clarity. Since you are talking about plugins, you have overridden at least one plugin method. One of the methods you have overridden is probably afterDraw. Overriding afterDraw would present the problem you mention, I believe. Try changing afterDraw to afterDatasetsDraw. Look at the docs for the plugin methods that can be overridden. You want the lines to be drawn before the tooltip is drawn, so drawing the lines right after the datasets are drawn seems like a nice solution. Maybe using beforeDatasetsDraw instead would be a nice solution too, depending on whether you would want the bars to be above the lines or not.