<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv" style="width: 700px; height: 500px;"></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
var myPlot = document.getElementById('myDiv'),
    x = [1, 2, 3, 4, 5],
    y = [10, 20, 30, 20, 10],
    data = [{x:x, y:y, type:'scatter',
             mode:'markers', marker:{size:20}
            }],
    layout = {hovermode:'closest',
              title:'Click on Points'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_click', function(){
    alert('You clicked this Plotly chart!');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.plot.ly/plotly-latest.min.js