Multiple Points firing on plotly click

plotly.js
1

Hello Everybody,

I have a plotly graph which has the code something like this:

var trace = { token:ser_num_list[i],
                                  x: x1[i],
                                  y: y1[i],
                                  name: parameter1+' '+ser_num_list[i],
                                  curveNumber:i,
                                  yaxis: 'y1',
                                  type: 'scatter',
                                  mode: 'lines',
                                  line:{dash: 'dot',width:1}
                                };
                                  graph_data.push(trace);
                              }
                              var layout = {
                                boxmode:"overlay",
                                //boxpoints:"outliers",
                                xaxis:{title:"Timestamp"},
                                yaxis: {title: parameter1},
                                showlegend:true,
                                mode:'lines',
                                side:'right',
                                legend:{y:450}
                                };
                                if(x2.length==0 && y2.length==0)
                                {
                                  console.log("firing at point1");
                                Plotly.newPlot('plot', graph_data, layout);

                                var plot=document.getElementById('plot');
                                plot.on('plotly_click', function(graph_data){
                                var pts = '';
                                for(var i=0; i < graph_data.points.length; i++){
                                  var xquery=graph_data.points[i].x ;
                                  var yquery= graph_data.points[i].y;
                                 
                                  var name=graph_data.points[0];
                                  console.log(xquery);
                                  console.log(yquery);
                                  console.log(name);
                                }

The issue is that when I plot multiple graphs and invoke the plotly_click it gives it me the point details of all the curves for that corresponding X axis instead of only the curve I am clicking on.

Can you please help me with this?

Thank You in Advance.

Rajarshi

2

Setting layout.hovermode to 'closest' should fix this.

3

Thank you very much etienne.

Help much appreciated :slight_smile: