0

When using a Scatter plot with Plotly i am unable to get hover text when i have more than 1 marker with the same x-axis value.

Can anyone please help me fix this?

Or is this a bug with plotly?

Check the marker that is closest to the line.

Code is here https://jsfiddle.net/qjdt92h2/

var trace1 = {
  x: [13.5, 12, 13, 14,13],
  y: [15, 17, 13.6, 17,18],
  text: ['4.17 below the mean', '4.17 below the mean', '0.17 below the mean', '0.17 below the mean', '0.83 above the mean', '7.83 above the mean'],
  mode: 'markers',
  name: 'Grade / Mean grade',
  marker:{
  color: 'rgb(255, 99, 132)'
  }


};

var trace2 = {
  x: [0, 20],
  y: [0, 20],
  mode: 'lines',
  name: 'Guide line',
   marker:{
  color: '#023587'
  }
};


var data = [ trace1, trace2];

var layout = {
  title:'Line and Scatter Plot'
};

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

1 Answer 1

1

You are probably looking for hovermode which should be set to closest in your case.

var trace1 = {
  x: [13.5, 12, 13, 14, 13],
  y: [15, 17, 13.6, 17, 18],
  text: ['4.17 below the mean', '4.17 below the mean', '0.17 below the mean', '0.17 below the mean', '0.83 above the mean', '7.83 above the mean'],
  mode: 'markers',
  name: 'Grade / Mean grade',
  marker: {color: 'rgb(255, 99, 132)'}
 };

var trace2 = {
  x: [0, 20],
  y: [0, 20],
  mode: 'lines',
  name: 'Guide line',
  marker:{color: '#023587'}
};


var data = [trace1, trace2];
var layout = {
  title:'Line and Scatter Plot',
  hovermode: 'closest'
};

Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

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

1 Comment

Thank you so much. That is exactly what i was looking for.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.