<head>
  <!-- Plotly.js -->

  <script src="https://cdn.plot.ly/plotly-latest.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
  <!-- PlotlyFinance.js -->
  <script src="https://cdn.rawgit.com/etpinard/plotlyjs-finance/master/plotlyjs-finance.js"></script>

<body>

  <div id="myDiv" style="width: 800; height: 640;"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
  </script>
</body>

    var myPlot = document.getElementById('myDiv'),
        d3 = Plotly.d3,
        N = 100,
        x = d3.range(N),
        y1 = d3.range(N).map( d3.random.normal() ),
        y2 = d3.range(N).map( d3.random.normal(-2) ),
        y3 = d3.range(N).map( d3.random.normal(2) ),
        trace1 = { x:x, y:y1, type:'scatter', mode:'lines', name:'Jeff' },
        trace2 = { x:x, y:y2, type:'scatter', mode:'lines', name:'Terren' },
        trace3 = { x:x, y:y3, type:'scatter', mode:'lines', name:'Arthur' },
        data = [ trace1, trace2, trace3 ],
        layout = {
            hovermode:'closest',
            title:'Click on Points to add an Annotation on it'
         };

    Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

    myPlot.on('plotly_click', function(data){
        var pts = '';
        for(var i=0; i<data.points.length; i++){
            annotate_text = 'x = '+data.points[i].x +
                          'y = '+data.points[i].y.toPrecision(4);

            annotation = {
              text: annotate_text,
              x: data.points[i].x,
              y: parseFloat(data.points[i].y.toPrecision(4))
            }

            annotations = self.layout.annotations || [];
            annotations.push(annotation);
            Plotly.relayout('myDiv',{annotations: annotations})
        }
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.