Combining box and scatter traces in one plot

plotly.js
1

I’m trying to use scatter trace in combination with box trace in order to work around the current limitation that doesn’t allow me to control individual marker colors when displaying all boxpoints in the chart. I’m going for effect equivalent to pointpos: -2, jitter: 1, ie. having the individual markers between the box plots and the values scattered randomly to avoid overlaps.

I got stuck because the mixed traces interact strangely with the y axis.
See codepen: https://codepen.io/palimondo/pen/JpobKe?editors=0010

There are 3 traces: traceBoxplotAll, traceBoxplotIQR and traceBoxpointsScatter.
The order in which they are added matter to the results, but is also mostly unstable. I can mix 2 of them, but adding a 3rd always messes things up in a different way. I wanted to still use traceBoxplotAll (but with transparent points) so that I can get proper spacing between series.

I have also tried setting x on the box plots, but it didn’t work. It seems like box plot switches the y axis into some special mode where each trace gets incremented integer index (this is visible when you comment out tickvals and ticktext), but box consecutive box plots get to share same index.

Is there a way around this?

2

After banging my head against this wall for a day I realized I need to put the scatterplot to a different axis!
So far I have made it work with grouped box plots and a scatter trace for each series:

1 Like
3

Hello palimondo!

Let me start by thanking you for posting your solution. I learnt a lot about ES6 and Plotly thanks to you.

I have a very similar problem to the one you had except I have to show only two different point colors and the box needs to be vertical. To achieve the different colors I have adding two scatter traces, but even when I have only one scatter along with the one vertical box (+points) I cannot get the points to overlap to create the desired plot result. I have tried playing with the relevant parameters (pointpos, overlaying, etc) but no dice. Do you think your solution can work vertically as well?