Plotly.js create a point on click

Question

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 plotly_click event only fires on already created points.

Any ideas how I can get a click event to get the current values from the location so I can plot the new point?

So far I'm only getting this:

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 < 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);
});

https://codepen.io/mayasky76/pen/ZXRRMJ/

Did you have a look at stackoverflow.com/questions/46157790/…? — Maximilian Peters
– Maximilian Peters, Commented Oct 11, 2017 at 16:58
Hi - Excellent - I have been googling away for a couple of days and have not come across that. Looks like it may give me an approach I can try. — Iain Wood
– Iain Wood, Commented Oct 12, 2017 at 8:24

Iain Wood · Accepted Answer · 2017-10-12 09:21:38Z

1

Many thanks to Maximillian Peters for this

Now have a scatter graph that reports location (xy) value on mousemove and plots a point to the chart on click

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

<body>
  x :<input id="xvalue" size="5"  /> y :<input id="yvalue" size="5" /> 
 <div id="myPlot" style="width:100%;height:100%"></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

Javascript

var traces = [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
}];

traces.push({
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'markers',
  type: 'scatter'
});

traces.push({
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'markers',
  type: 'scatter'
});

traces.push({
  x: [],
  y: [],
  mode: 'markers',
  type: 'scatter'
});

var myPlot = document.getElementById('myPlot')
Plotly.newPlot('myPlot', traces, {hovermode: 'closest'});

Number.prototype.between = function(min, max) {
  return this >= min && this <= max;
};


Plotly.d3.select(".plotly").on('click', function(d, i) {
  var e = Plotly.d3.event;
  var bg = document.getElementsByClassName('bg')[0];
  var x = ((e.layerX - bg.attributes['x'].value + 4) / (bg.attributes['width'].value)) * (myPlot.layout.xaxis.range[1] - myPlot.layout.xaxis.range[0]) + myPlot.layout.xaxis.range[0];
  var y = ((e.layerY - bg.attributes['y'].value + 4) / (bg.attributes['height'].value)) * (myPlot.layout.yaxis.range[0] - myPlot.layout.yaxis.range[1]) + myPlot.layout.yaxis.range[1]
  if (x.between(myPlot.layout.xaxis.range[0], myPlot.layout.xaxis.range[1]) &&
    y.between(myPlot.layout.yaxis.range[0], myPlot.layout.yaxis.range[1])) {
    Plotly.extendTraces(myPlot, {
      x: [
        [x]
      ],
      y: [
        [y]
      ]
    }, [3]);
  }
});

Plotly.d3.select(".plotly").on('mousemove', function(d, i) {
  var e = Plotly.d3.event;
  var bg = document.getElementsByClassName('bg')[0];
  var x = ((e.layerX - bg.attributes['x'].value + 4) / (bg.attributes['width'].value)) * (myPlot.layout.xaxis.range[1] - myPlot.layout.xaxis.range[0]) + myPlot.layout.xaxis.range[0];
  var y = ((e.layerY - bg.attributes['y'].value + 4) / (bg.attributes['height'].value)) * (myPlot.layout.yaxis.range[0] - myPlot.layout.yaxis.range[1]) + myPlot.layout.yaxis.range[1]
  if (x.between(myPlot.layout.xaxis.range[0], myPlot.layout.xaxis.range[1]) &&
    y.between(myPlot.layout.yaxis.range[0], myPlot.layout.yaxis.range[1])) {
    console.log("Location X:"+x+" Y"+y)
   document.getElementById("xvalue").value = x;
   document.getElementById("yvalue").value = y;
  }
});

https://codepen.io/mayasky76/pen/ZXRRMJ

answered Oct 12, 2017 at 9:21

Iain Wood

211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CircleOnCircles Over a year ago

The given link seems expired. Here is the new one codepen.io/circleoncircles/pen/abObLLE I cannot replicate the behaviour. Only what I see so far is that the x,y value change when hover over plotly toolbox

jranalli Over a year ago

Changes to plotly have led to different elements needing to be chosen for this. The version crossover where the behavior stopped working as documented in this answer was 1.41.3 to 1.42.0. I had a version working as of Apr 2022 posted as an answer to this question: stackoverflow.com/questions/71755717/…

Collectives™ on Stack Overflow

Plotly.js create a point on click

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related