Box Annotation coordinates

[afshinmoshrefi]

I have a box annotation drawn on a line chart.

I have an event handler that needs to know when the cursor is inside the annotation box.

To accomplish this, I need to calculate the screen coordinates of the box annotation.

How can I calculate the screen location of the box annotation?

[stockiNail]

@afshinmoshrefi all annotations can have some events hooks (see doc https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/configuration.html#events).

In your use case, it could be enough to set the enter hook:

plugins: {
  annotation: {
    annotations: {
      myBox: {
        type: 'box',
        ...
        enter(context, event) {
          // cursor hover the annotation
        }
      }
    } 
  }
}

[afshinmoshrefi]

The extra render issue is due to the way React works. When there is a state variable change, there will be a render even if it's unnecessary.
I'm setting the coordinates of the annotation box in a React state variable when the "enter" event on the annotation box is triggered.
That's why I was hoping to get access to the annotation element ahead of time so that I didn't have to update state variables after the "enter" event on the annotation is triggered. So I'm getting an extra render because I can only get the coordinates after the first "enter" event is triggered.

[stockiNail]

OK, clear. Unfortunately there isn't any public API to get the elements.

[stockiNail]

Probably a possible solution is to wait for version 2.1.0 where PR #744 could be added. Activating a hook, you can get the elements before or after drawing.

[afshinmoshrefi]

When do you think version 2.1.0 will be released?

[stockiNail]

Version 2.0.0 has been released 8 days ago therefore some weeks are needed I guess.

Anyway, have a look to the test suite (I think it can help you even if, be aware, it isn't documented and maintained for public use):

chartjs-plugin-annotation/test/utils.js

Lines 18 to 20 in 1857f42

	export function getAnnotationElements(chart) {
	return window['chartjs-plugin-annotation']._getState(chart).elements;
	}