Crosshair is rendered on top of tooltips

[CreativeCoders]

Crosshair is rendered on top of tooltips (and the datalabels plugin annotations). It would be nice to be able to push it behind elements in the chart.

[jclusso]

Has anyone resolved this?

[CreativeCoders]

Not to my knowledge @jclusso

[jclusso]

@CreativeCoders actually this guys version adds an option drawUnderChart that fixes this.

[se98100]

@daraeman could make a PR to include this feature maybe, it would be great!

[shi-314]

Here's is a very simple workaround, if you have the plugin globally registered in ChartJS:

// Fix for crosshair plugin drawing over the chart and tooltip

let crosshairPlugin = Chart.registry.plugins.get("crosshair");
const afterDraw = crosshairPlugin.afterDraw.bind(crosshairPlugin);

crosshairPlugin.afterDraw = function (chart, args, options) {};

crosshairPlugin.afterDatasetDraw = function (chart, args, options) {
    afterDraw(chart, args, options);
};

This plugin is rendering the crosshair during the afterDraw state which is triggered after the tooltip has been rendered. This workaround moves the rendering logic to the afterDatasetDraw function instead.