How to draw the item before the datasetsDraw on an event?

[Udemology]

I have an onHover option and I want to draw a shape behind the datasets when I mouseover the chartArea. However, I cannot find a method to achieve this. It tend to draw on top. Normally I use beforeDatasetDraw which works fine if there is no interaction. But now it needs to draw on mousemove event which becomes a bit more tricky for me.

I have been reading the plugin for event handling, https://www.chartjs.org/docs/latest/developers/plugins.html, but I struggle understand it. I also tried with a beforeEvent, and afterEvent but it does not work as the shape will be draw always on top. Probably because the chart has rendered already.

I tried 2 options but both failed.

onHover: (event, args) => {
          const { ctx, chartArea: {top, bottom, height}, scales: {x, y} } = event.chart;
          ctx.save();
          
          // shape overlaps on top of bars.
          ctx.fillRect(x.getPixelForValue(2), top, x.getPixelForValue(2), height);
},

I also tried it with a beforeEvent / afterEvent but the end result is identical.

    const eventCatcher = {
      id: 'eventCatcher',
      beforeEvent: ((chart, args, plugins) => {
        const { ctx, canvas, chartArea: {top, bottom, height}, scales: {x, y} } = chart;
        const event = args.event;
        if (event.type === 'mousemove') {
          ctx.fillRect(x.getPixelForValue(2), top, x.getPixelForValue(2), height)
        }
      })
    }

This is the result I get:

I hope someone can help out.

[stockiNail]

@Udemology in my opinion, the shape should be drawn in beforeDatasetsDraw. All data you need to draw should be created and managed in afterEvent. To force a draw from afterEvent you should set args.changed property to true before return. Setting that property chart.js redraws the chart.

[stockiNail]

I dont know the details of your use case but to draw shapes or labels you could use chartjs-plugin-annotation
I think its easier to do that you described

[stockiNail]

(by plugin annotation): https://codepen.io/stockinail/pen/wvEvoYy

[stockiNail]

(by custom plugin): https://codepen.io/stockinail/pen/poOoPGQ

let rect; // <--- rect size to draw

const plugin = {
  id: 'drawBox',
  events: ['mousemove'], // <--- Only mousemove event is caught

  beforeDatasetsDraw(chart, args) { // <--- in beforeDatasetsDraw the rect is drawn
    if (rect) {
       const ctx = chart.ctx;
       ctx.save();
       ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
       ctx.restore();
    }
  },

  afterEvent(chart, args) { // <--- calculated the size of the rect to draw
    const {chartArea: {top, bottom, height}, scales: {x, y} } = chart;
    if (!args.inChartArea && rect) {  // <-- if out of chart area, rect is removed
      rect = undefined;
      args.changed = true; // <--- in this way you force Chart.js to draw and then remove the rect
    } else if (!rect) {
      rect = {
        x: x.getPixelForValue(2),
        y: top,
        width: x.getPixelForValue(5) - x.getPixelForValue(2),
        height
      };
      args.changed = true; // <--- in this way you force Chart.js to draw and then draw the rect
    }
  },
};

[Udemology]

Hi @stockiNail thank you for your answer. It makes sense to split them in two parts looking at it. Drawing and interactions should be separated.

Main reason why I want to learn this is to understand interactions better. I have this long standing desire to create a custom plugin and custom chart type. Which I hope to achieve this year.

I did not know the annotation plugin could do that as well. However, that specific functionality I try to emulate. Based on your info I think I might know what to do. The knowledge you have is absolutely gold.

I did not saw you have a sponsor button on your Github account if you do let me know. I will make sure to sponsor you as a token of gratitude. As I truly appreciate you insights and knowledge sharing.