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

<div id="myDiv" style="width:100%;"></div>
var trace1 = {
  x: [0, 1, 2, 3, 4],
  y: [0, 4, 0, 8, 6],
  mode: 'lines+markers',
  type: 'scatter',
  name: 'click and drag<br>on the legend<br>to reposition'
};

var trace2 = {
  x: [0, 1, 2, 3, 4],
  y: [4, 0, 4, 8, 12],
  mode: 'lines+markers',
  type: 'scatter',
  name: 'or click on this<br>text to rename<br>the trace'
};

var data = [trace1, trace2];
var layout = {
	title: 'Click Here<br>to Edit Chart Title',
	annotations: [
    {x: 1,
     y: 4,
     xref: 'x',
     yref: 'y',
     text: 'Click here on the text to edit the annotation.'},
    {x: 3,
     y: 8,
     xref: 'x',
     yref: 'y',
     text: 'Click and drag the annotation text<br>or arrowhead to reposition.'}
  ],
};

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.