<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>
var x = [1,2,3,4,5,6,7,8,9];
var y = [9,8,7,6,5,6,7,8,9];

var rect = {
	            type: 'rect',
	            yref: 'paper',
	            x0: 0,
	            y0: 0,
	            x1: 0.3,
	            y1: 1,
	            fillcolor: '#ff6699'
            }

var layout = {shapes: [rect]};

	Plotly.plot('graph', [{x: x, y:y}], layout, {editable: true});

	var div = document.getElementById('graph');

	div.on('plotly_click', function(data) {
		console.log(data);

		var newRect = JSON.parse(JSON.stringify(rect));

		newRect.fillcolor = 'ffff00';

		newRect.x0 = data.points[0].x;
		newRect.x1 = newRect.x0 + 0.1;

		layout.shapes.push(newRect);
		console.log(layout);
		Plotly.redraw(div, layout);
	})

	div.on('plotly_relayout', function(data) {
		console.log("relayout");
	})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.