Does plotly.js scatter/line graph handle point selection?

plotly.js
1

Hi plotyly devs and community!

I want to use plotly in an interactive line graph and needs point selection as a part of the interaction. So far plotly does not highlight the selected points. Is there a way to enable this?

For example, when a point on a line chart is clicked, it will display in different marker symbol / color. Or is there a fast way to achieve this?

Thanks!
Kevin

2

Hi Kevin,

Plotly exposes click and hover events, so you can do things like this:

var myDiv = document.getElementById('my-div');

Plotly.plot(myDiv, [{ x: [1,2,3], y: [5,7,2] }], {});

myDiv.on('plotly_click', function(evt){
  // Do something with the data from the event,
  // for example, calling `Plotly.restyle`
});

There’s some more examples here too!

3

Hi,

Thanks very much for the response!

Somehow I don’t find a way to highlight one point after selection. The ‘restyle’ function only allows restyling one entire trace. I want to select two points from same time series and mark the points on the graph. So is the ‘select + highlight point’ effect possible in Plotly?

The Google charts has something I described. When you click on the chart it will mark the point:

https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

Besides the example in the link you mentioned is not working on Firefox 39.0 or Chrome 47. Chrome complains with the following errors:

Uncaught TypeError: Cannot read property ‘points’ of undefinedn @ plotly-latest.min.js:34
pen.js:16

Thanks!
Regards,
Kevin

4

@kevin

You need to wrap the value attribute in Plotly.restyle with an extra [] to modify each point in a trace.

See example here: http://codepen.io/etpinard/pen/QyLbqY

That is, Plotly.restyle('graph', 'marker.color', ['red', 'green','blue']) restyles the first trace in red, the second in green and the third in blue.

Whereas, Plotly.restyle('graph', 'marker.color', [['red', 'green','blue']]) restyles the points in the first trace.

5

Thanks. I did not notice that before. I’ll give a shot.

Thanks very much for the advice!

6

Hi, it seems that most charts, if i set hovermode:false, in the layout, that the click event does not fire.

My intention is that I am trying to NOT show your tooltip, but get access to the point data on click.

If i have hovermode:‘none’, even, then the click event registers, BUT, it shows an empty tooltip.

Thanks!

7

Looks like you discovered a bug. Thanks for writing in!

Please subscribe to Falsy hovermode and/or hoverinfo should not disabe click event data · Issue #313 · plotly/plotly.js · GitHub for the latest development.

8

how would you apply this in R with shiny? I would love to restyle the color palette based on a users choice for a new color, and apply a new pallette to all traces using a modification of the Plotly.restyle(‘graph’, ‘marker.color’, [[‘red’, ‘green’,‘blue’]] approach