Change box width in grouped box plot

📊 Plotly Python
1

How can the width and spacing of a plotly box plot (e.g. px.box) be changed? Code example:

import pandas as pd
import plotly.express as px
df = pd.DataFrame({
    "val":  [ 1,  2,  1,  3,  1,  4,  3,  2,  2,  3,  3,  0],
    "cat1": ["A","A","A","A","B","B","B","B","C","C","C","C"],
    "cat2": ["X","X","Y","Y","X","X","Y","Y","X","X","Y","Y"]
})
fig=px.box(df,
           x="cat1",
           y="val", 
           color="cat2",
           boxmode="group")
fig.show()

Produces this nice plot:

grafik
grafik733×452 3.11 KB

It looks great, but let’s pretend I am unhappy with the widths of the boxrs and want to make them wider/smaller by using fig.update_traces(width=0.5). The result:
grafik
grafik722×457 3.05 KB

Suddenly, the boxmode="group" is ignored. Is this a bug? Or is there another way to change the width of box plots while still retaining grouping?

Based on this SO thread from 2014 I tried to set fig.update_layout(boxgroupgap=1) and fig.update_layout(boxgap=1), but neither made any difference here.

Version: plotly 4.12.0

2

Does that help you perhaps?

import pandas as pd
import plotly.express as px
df = pd.DataFrame({
    "val":  [ 1,  2,  1,  3,  1,  4,  3,  2,  2,  3,  3,  0],
    "cat1": ["A","A","A","A","B","B","B","B","C","C","C","C"],
    "cat2": ["X","X","Y","Y","X","X","Y","Y","X","X","Y","Y"]
})
fig=px.box(df,
           x="cat1",
           y="val", 
           color="cat2",
           boxmode="group")

fig.update_layout(height=600, width=300)

fig.show()

newplot-16
newplot-16300×600 7.52 KB

3

Thanks for the reply, but no. My goal is indeed to change the width of the boxes independent of the figure width. Combining box width and figure width does not help either:

import pandas as pd
import plotly.express as px
df = pd.DataFrame({
    "val":  [ 1,  2,  1,  3,  1,  4,  3,  2,  2,  3,  3,  0],
    "cat1": ["A","A","A","A","B","B","B","B","C","C","C","C"],
    "cat2": ["X","X","Y","Y","X","X","Y","Y","X","X","Y","Y"]
})
fig=px.box(df,
           x="cat1",
           y="val", 
           color="cat2",
           boxmode="group")
fig.update_traces(width=0.5)
fig.update_layout(height=300, width=600)
fig.show()

grafik

4

By the way, this works as expected for bar plots:

import pandas as pd
import plotly.express as px
df = pd.DataFrame({
    "val":  [ 1,  2,  1,  3,  1,  4,  3,  2,  2,  3,  3,  0],
    "cat1": ["A","A","A","A","B","B","B","B","C","C","C","C"],
    "cat2": ["X","X","Y","Y","X","X","Y","Y","X","X","Y","Y"]
})
fig=px.bar(df,
           x="cat1",
           y="val", 
           color="cat2",
           barmode="group")
fig.update_layout(height=300, width=600)
#fig.update_traces(width=0.2)
fig.show()

grafik
If I un-comment that fig.update_traces(width=0.2) line, Plotly gives me:
grafik
The bar widths are succesfully changed.
How can I achieve the same width change in a grouped box plot?

5

How about that:

import pandas as pd
import plotly.express as px
df = pd.DataFrame({
    "val":  [ 1,  2,  1,  3,  1,  4,  3,  2,  2,  3,  3,  0],
    "cat1": ["A","A","A","A","B","B","B","B","C","C","C","C"],
    "cat2": ["X","X","Y","Y","X","X","Y","Y","X","X","Y","Y"]
})
fig=px.box(df,
           x="cat1",
           y="val", 
           color="cat2",
           boxmode="group")
fig.update_layout(boxgroupgap=0.2, boxgap=0.8)
fig.show()

newplot-34
newplot-34986×525 10.3 KB

7

I get it now. I tried to change the width by fig.update_traces(width=0.5) and additionally set different values of boxgroupgap and boxgap in my tests. This does not work.

The trick seems to be to only use boxgroupgap and boxgap to indirectly set the width by specifiying the gaps. As soon as fig.update_traces(width=0.5) is added, the grouping is lost.

Thanks @windrose!

1 Like
8

image
image790×417 7.58 KB

Hey Michael! I am facing the same problem apparently. As you can see in my figure,
there is a huge gap between each group of boxes and I tried every way to reduce it and make it look better.

9

Hi @czendron, by the looks of it, this post seems to be related: