The mouse did not enter the box, but an event occurs.

[feents]

1. Connect to "https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/interaction/interaction.html"

2. On the "Config" tab, add "interaction: {intersect: false}", within "options".

3. Try triggering a mouse event on the chart above.

The mouse did not enter the box, but an event occurs.

[stockiNail]

@feents if you set intersect: false, the event it manages even if the mouse is not hovering the element. Only with mode: 'point' intersect is ignored. Therefore, in my opinion, it's working correctly, as designed.

[feents]

I need "interaction: { mode: 'index', intersect: false }" option for my page.

Is there any way to change the option of "interaction" in "chartjs-plugin-annotation" separately?

For example

new Chart(document.getElementById('dataChart'), {
  type: 'line',
  data: { labels: labels, datasets: datasets },
  options: {
    ...
    interaction: { mode: 'index', intersect: false },
    ...
    annotation: {
      annotations: [{
        type: "box"
        , interaction: { intersect: true } // like this
        , xMin: 10
        , xMax: 15
        , backgroundColor: "rgba(255, 0, 0, 0.3)"
        , borderWidth: 0
        , click: (({element})=>{
          ...
        })
        , enter: (({element})=>{
          ...
          return true;
        })
        , leave: (({element})=>{
          ...
          return true;
        })
      }
    ]}
  }
});

[stockiNail]

@feents the interaction can be set at plugin level and used only for annotations. See the documentation: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/configuration.html

Anyway interaction config cannot be set at annotation level (as you wrote above) but at plugin one and used for all annotations. You updated code:

new Chart(document.getElementById('dataChart'), {
  type: 'line',
  data: { labels: labels, datasets: datasets },
  options: {
    ...
    interaction: { mode: 'index', intersect: false },
    ...
    annotation: {
      interaction: { intersect: true }, // at plugin level
      annotations: [{
        type: "box"
        , xMin: 10
        , xMax: 15
        , backgroundColor: "rgba(255, 0, 0, 0.3)"
        , borderWidth: 0
        , click: (({element})=>{
          ...
        })
        , enter: (({element})=>{
          ...
          return true;
        })
        , leave: (({element})=>{
          ...
          return true;
        })
      }
    ]}
  }
});

[feents]

Thank you. It works for me.

[stockiNail]

Glad to hear that!