Diff Scatter Plot

plotly.js
1

Hello. I was hoping to use Plotly.js to create a diff scatter plot similar to the one available in Google Charts:
https://developers.google.com/chart/interactive/docs/gallery/diffchart#diff-scatter-charts

There doesn’t appear to be many (any?) other libraries that support this kind of scatter chart that I have found so far. However, I might just be searching for the wrong term. Is this kind of chart something that would be possible to create in Plotly.js? If yes, can you point me in the right direction? And if not, what might be the best way to implement such a feature? Create a plugin for Plotly.js to be able to accept and draw these kinds of data sets?

2

Is this kind of chart something that would be possible to create in Plotly.js?

Absolutely. Use one trace per dataset and use layout shapes to draw the tails.

3

Thanks for pointing me in the right direction. I’ve been playing around with this approach today and it looks great apart from one exception.

Toggling a specific layer off doesn’t remove the associated lines because they are part of a general shapes array, rather than part of the trace. Would I need to write a custom handler to hide the lines (tails) that should no longer be active?

4

Yes unfortunately.

Come to think of it, instead of using shapes, you could try to drawing those diff lines using another scatter mode: 'lines' trace. Using the legendgroup attribute, you’ll be able to make the marker points and the diff lines toggle at once.