title: Plotly.js create a point on click
body: <p>Having an issue. Using plotly.js to draw a scatter chart, I need to be able to click on the chart and retrieve the values of the point so that I can draw a new point at the clicked location. The <code>plotly_click</code> event only fires on already created points.</p>
  
  <p>Any ideas how I can get a click event to get the current values from the location so I can plot the new point?</p>
  
  <p>So far I'm only getting this:</p>
  
  <pre><code>var trace1 = {
      x: [1, 2, 3, 4],
      y: [10, 15, 13, 17],
      mode: 'markers',
      type: 'scatter'
  };
  
  var trace2 = {
      x: [2, 3, 4, 5],
      y: [16, 5, 11, 9],
      mode: 'lines',
      type: 'scatter'
  };
  
  var trace3 = {
      x: [1, 2, 3, 4],
      y: [12, 9, 15, 12],
      mode: 'lines+markers',
      type: 'scatter'
  };
  
  var data = [trace1, trace2, trace3];
  
  Plotly.newPlot('myDiv', data);
  
  document.getElementById('myDiv').on('plotly_click', function(data){
      var pts = '';
  
      for(var i=0; i &lt; data.points.length; i++){
          pts = 'x = ' + data.points[i].x +'\ny = ' + data.points[i].y.toPrecision(4) + '\n\n';
      }
  
      alert('Closest point clicked:\n\n'+pts);
  });
  </code></pre>
  
  <p><a href="https://codepen.io/mayasky76/pen/ZXRRMJ/" rel="nofollow noreferrer">https://codepen.io/mayasky76/pen/ZXRRMJ/</a></p>