plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

scattermode = group

Open nicolaskruchten opened this issue 5 years ago • 5 comments
trafficstars

We need to be able to position scatter markers (not scattergl!) on top of bars even when barmode=group. Note: the ability to position scatter markers on top of grouped, stacked bars is out of scope.

This means we will need to port the following attributes from bar to scatter:

  • alignmentgroup
  • offsetgroup

We will also need to create new layout attributes for scatter, with behaviour ported from bar:

  • scattermode (accepting only group and overlay, which is the current default)
  • scattergap

nicolaskruchten avatar Jun 10 '20 12:06 nicolaskruchten

From @TonyBonen asking for this feature in #5480:


I want to have a plot with scatter points overtop of bars. The problem is that the locations (on the x axis in my case) of the bars cannot be passed to the scatter points - they always sit directly above the x-axis values rather than being spread out across the bars within a grouped category.

Its the same issue as being asked here: https://stackoverflow.com/questions/54591377/overlay-a-grouped-bar-chart-with-scatter-in-plotly

I'm working in R plotly but seems this problem appears also in the Python implementation. This example should produce the error:

example <- data.frame(country = rep(c("Canada", "France", "UK"), 2),
                    sex =  rep(c('men', 'women'), 3),
                    value1 = 1:6 + 7,
                    value2 = rep(14:12, 2))

 plot_ly(example) %>% 
       add_trace(type = 'bar',
           x = ~sex, 
           color=  ~country, 
            y=  ~value1)   %>%

    add_trace(type = 'scatter', mode="markers",
            x = ~sex, 
            marker = list(size = 8, color = "#000000"),
             y=  ~value2)  

The result is something like the screen shot below where in the 2 groups (men and women) the 3 scatter points are lined up in the middle of the group. The desired behaviour is to have those points appear above their respective colour/country groups.

image

alexcjohnson avatar Feb 09 '21 03:02 alexcjohnson

As a workaround for now, one can use a carefully-configured box trace with an invisible box and visible points, as demonstrated in this CodePen: https://codepen.io/nicolaskruchten/pen/LYbZovb

Here is the annotated Python code for generating this figure, which should be reasonably easy to translate to R:

import plotly.graph_objects as go
fig = go.Figure(
    data=[
        go.Bar(x=["a","b"], y=[1,2]),
        go.Bar(x=["a","b"], y=[2,1]),
        go.Box(x=["a","b"], y=[0.5,1.5],
               marker_color="red"), # marker_color required
        go.Box(x=["a","b"], y=[1.5,0.5],
               marker_color="green"), # marker_color required
    ],
    layout=dict(
        hovermode="closest", #otherwise you get the box hovers
        barmode="group",
        bargroupgap=0, # the default
        bargap=0.2, # the default
        boxmode="group",
        boxgroupgap=0, # set to match bargroupgap
        boxgap=0.2, # set to match bargap,
        template="none"
    )
)
fig.update_traces(
    selector=dict(type="box"), # update only boxes
    boxpoints="all", # show points
    pointpos=0, # centered
    jitter=0, # no jitter
    line_color="rgba(255,255,255,0)", # hide box lines
    fillcolor="rgba(255,255,255,0)" # hide box fill
)
fig.show()

nicolaskruchten avatar Feb 09 '21 14:02 nicolaskruchten

How could this work with the x axis values being Date types?

hoetmaaiers avatar Dec 15 '21 09:12 hoetmaaiers

Wondering if should add points to the bar traces instead? Something similar to what we have for box plots...

archmoj avatar Aug 17 '22 17:08 archmoj

Let’s keep it in the scatter trace. We still want to support other features of scatter traces like error bars, lines… and it’s often going to be a different data set from the associated bars, perhaps on a different y axis.

alexcjohnson avatar Aug 17 '22 20:08 alexcjohnson

It looks we also need to add orientation to scatter traces for this to work.

archmoj avatar Nov 22 '22 16:11 archmoj