title: chart.js trigger plugin/function only once after chart is rendered
body: <p>I have a mixed chart.js chart (line and scatter). I wrote a plugin to add some labels to the scatter dots.</p>
  <p>There's a big array for this purpose, and my problem is that the <code>afterRender</code> event is triggered every time the mouse moves around the chart, so this causes that all these labels/positions are calculated many many times, whereas I only need them to be calculated and drawn one time. It also causes that the labels disappear while this calculations are being made.</p>
  <p>I was able to partially fix this by disabling the mouseover event, but then the tooltips of the line chart are not displayed (and I need them to be displayed).</p>
  <p>I've tried to add the <code>events: []</code> line for the scatter definition only, but that didn't work.</p>
  <p>I've also tried adding a flag (using a boolean variable) inside plugin, in order to run it only once, but then what happens is that the labels dissapear if you move the mouse around the chart, because for some reason it keeps being redrawn as the mouse moves, but it doesn't draw the labels (which makes sense because they're drawn one time only).</p>
  <p>My code is kind of long, so here is only the relevant part:</p>
  <pre><code>const multiplos5_0 = {
    id: 'multiplos5_0',
    afterRender(ctx0, args, options) {
          
          const myChart0 = ctx0.ctx;
          //myChart0.save();
          myChart0.font = &quot;normal 8px Verdana&quot;;
          myChart0.fillStyle = &quot;#0070C5&quot;;
          paddLeft = 0;
          console.log(&quot;hellooooooooooo &quot;); // &lt;&lt; a lot of hello's are being logged
          for (i=0; i &lt; markedIdxs_0.length; i++) {
              if (markedVals_0[i] &lt; 10)
                  paddLeft=8;
              else
                  paddLeft=12;
  
              myChart0.fillText(markedVals_0[i], ctx0.getDatasetMeta(3).data[markedIdxs_0[i]].x - paddLeft, ctx0.getDatasetMeta(3).data[markedIdxs_0[i]].y + 3);
          }
    }
  
  };
  
  
  
  Chart.register(multiplos5_0);
  
  
  const basicas = new Chart(ctx0, {
      data: data0,
  
      options: {
          scales: {
              x2_0: {
                  min: 0,
                  max: 13,
                  position: 'bottom',
                  type: 'category',
                  ticks: {color: '#0070C5'},
                  offset: true,
              },
              x_0: {
                  display: false,
                  min: 1,
                  max: 13,
                  ticks: {stepSize: 1, display: false},
                  offset: true,
                  events: [] // &lt;&lt; this is the scatter scale and this line do nothing
              },
              y0: {
                  min: 20,
                  max: 120,
                  ticks: {stepSize: 10, color: '#555555', crossAlign: 'start'},
                  grid:{color:'#f1f1f1', display:true}
              },
              y20: {
                  position: 'right',
                  min: 20,
                  max: 120,
                  ticks: {stepSize: 10, color: '#555555'},
                  grid:{display:false},
  
              },
          },
          plugins: {
              multiplos5_0,
              legend: false,
              tooltip: {
                  displayColors: false,
                  filter: function (tooltipItem) {
                  return tooltipItem.datasetIndex == 2;
                  },
                  callbacks: {
                      //title: &quot;el título&quot;,
                      label: function(context) {
                          let label = longLabels_0[context.dataIndex] + ': ' + context.parsed.y;
                          return label;
                      }
                  }
              }
          },
      },
  
  
  });
  </code></pre>
  <p>Here's the chart image, the labels I'm talking about are those small blue numbers on the chart:</p>
  <p><a href="https://i.stack.imgur.com/d09TT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d09TT.png" alt="enter image description here" /></a></p>
  <p>Is there a way to prevent the chart from being redrawn when the mouse moves over the chart? or a way to disable mouseover event only for the scatter scale?</p>
  <p>FYI: If I use the afterDatasetsDraw event instead of afterRender, then the plugin is triggered even more.</p>
  <p>I hope I made myself clear. Any help or workaround will be really appreciated!!</p>
  <p>UPDATE:
  I was able to fix this behavior. I couldn't do what I was asking here, but now the charts are rendered fine. The reason I posted this is because I was trying to display 3 similar charts, and I kept getting an exception, until I realized that the 3 plugins were triggered when the 1st chart was drawn. I found another solution here to prevent that, and that did the trick. Also I've changed the <code>afterRender</code> to <code>afterDatasetsDraw</code> and even if it's apparently triggered many times, the labels don't disappear. Anyway, it's working now.</p>