<head>
  <script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>
</head>
<html>
  <body>
    <div id="myDiv"></div>
  </body>
</html>
var count = 0
var trace1 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 3, 2, 4, 3, 4, 6, 5],
  type: 'scatter'
};
var data = [trace1];
var layout = {
  showlegend: false,
  annotations: [
    {
      x: 4,
      y: 4,
      xref: 'x',
      yref: 'y',
      captureevents: true,
      text: 'clicks: 0',
      showarrow: true,
      font: {
        family: 'Courier New, monospace',
        size: 16,
        color: '#ffffff'
      },
      align: 'center',
      arrowhead: 2,
      arrowsize: 1,
      arrowwidth: 2,
      arrowcolor: '#636363',
      ax: 20,
      ay: -30,
      bordercolor: '#c7c7c7',
      borderwidth: 2,
      borderpad: 4,
      bgcolor: '#ff7f0e',
      opacity: 0.8
    }
  ]
};
Plotly.newPlot('myDiv', data, layout). then ( () => {
  var layer = document.getElementById("myDiv")
  
  layer.on("plotly_clickannotation", data => {
    count++
    
    Plotly.update(layer, {}, {
      ["annotations[0].text"]: `clicks: ${count}`
    })
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.