Bug: Sometimes box and whiskers span multiple x axis ticks

[laura-cbre]

I think there is a bug, where plotly will make some box and whiskers overlap another x axis tick, for no reason that I can see.

Example of the problem:

Removing one box and whisker solves it:

Or adding one box and whisker solves it:

The three charts only differ by the number of box and whiskers with data, so I think this might be a bug?

The plotly chart objects fyi in order:

[{"boxpoints": false, "line": {"color": "#e53935"}, "marker": {"color": "#e53935", "line": {"color": "#e53935"}}, "name": "Box 1", "type": "box", "y": [21.0555553333, 21.4358461549, 21.4358461549, 22.33430536877936, 22.3997713193, 22.3997713193, 26.9999997778]}, {"boxpoints": false, "line": {"color": "#8e24aa"}, "marker": {"color": "#8e24aa", "line": {"color": "#8e24aa"}}, "name": "Box 2", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#3949ab"}, "marker": {"color": "#3949ab", "line": {"color": "#3949ab"}}, "name": "Box 3", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#039be5"}, "marker": {"color": "#039be5", "line": {"color": "#039be5"}}, "name": "Box 4", "type": "box", "y": [21.1666664444, 21.714605311649997, 21.714605311649997, 23.24186989017084, 24.59777385085, 24.59777385085, 27.8888886667]}, {"boxpoints": false, "line": {"color": "#00897b"}, "marker": {"color": "#00897b", "line": {"color": "#00897b"}}, "name": "Box 5", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#7cb342"}, "marker": {"color": "#7cb342", "line": {"color": "#7cb342"}}, "name": "Box 6", "type": "box", "y": [null, null, null, null, null, null, null]}],
                        {"bargap": 0, "boxgap": 0, "hoverlabel": {"namelength": -1}, "showlegend": false, "title": {"text": "Bad Boxplot"}, "xaxis": {"automargin": true, "range": [-0.5, 5.5], "rangemode": "normal", "zeroline": false}, "yaxis": {"automargin": true, "hoverformat": ",.1f", "rangemode": "normal", "title": {"text": "degC"}, "zeroline": false}}

[{"boxpoints": false, "line": {"color": "#e53935"}, "marker": {"color": "#e53935", "line": {"color": "#e53935"}}, "name": "Box 1", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#8e24aa"}, "marker": {"color": "#8e24aa", "line": {"color": "#8e24aa"}}, "name": "Box 2", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#3949ab"}, "marker": {"color": "#3949ab", "line": {"color": "#3949ab"}}, "name": "Box 3", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#039be5"}, "marker": {"color": "#039be5", "line": {"color": "#039be5"}}, "name": "Box 4", "type": "box", "y": [21.1666664444, 21.714605311649997, 21.714605311649997, 23.24186989017084, 24.59777385085, 24.59777385085, 27.8888886667]}, {"boxpoints": false, "line": {"color": "#00897b"}, "marker": {"color": "#00897b", "line": {"color": "#00897b"}}, "name": "Box 5", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#7cb342"}, "marker": {"color": "#7cb342", "line": {"color": "#7cb342"}}, "name": "Box 6", "type": "box", "y": [null, null, null, null, null, null, null]}],
                        {"bargap": 0, "boxgap": 0, "hoverlabel": {"namelength": -1}, "showlegend": false, "title": {"text": "Good Boxplot"}, "xaxis": {"automargin": true, "range": [-0.5, 5.5], "rangemode": "normal", "zeroline": false}, "yaxis": {"automargin": true, "hoverformat": ",.1f", "rangemode": "normal", "title": {"text": "degC"}, "zeroline": false}}

[{"boxpoints": false, "line": {"color": "#e53935"}, "marker": {"color": "#e53935", "line": {"color": "#e53935"}}, "name": "Box 1", "type": "box", "y": [21.0555553333, 21.4358461549, 21.4358461549, 22.33430536877936, 22.3997713193, 22.3997713193, 26.9999997778]}, {"boxpoints": false, "line": {"color": "#8e24aa"}, "marker": {"color": "#8e24aa", "line": {"color": "#8e24aa"}}, "name": "Box 2", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#3949ab"}, "marker": {"color": "#3949ab", "line": {"color": "#3949ab"}}, "name": "Box 3", "type": "box", "y": [21, 21, 21, 22, 22, 22, 26]}, {"boxpoints": false, "line": {"color": "#039be5"}, "marker": {"color": "#039be5", "line": {"color": "#039be5"}}, "name": "Box 4", "type": "box", "y": [21.1666664444, 21.714605311649997, 21.714605311649997, 23.24186989017084, 24.59777385085, 24.59777385085, 27.8888886667]}, {"boxpoints": false, "line": {"color": "#00897b"}, "marker": {"color": "#00897b", "line": {"color": "#00897b"}}, "name": "Box 5", "type": "box", "y": [null, null, null, null, null, null, null]}, {"boxpoints": false, "line": {"color": "#7cb342"}, "marker": {"color": "#7cb342", "line": {"color": "#7cb342"}}, "name": "Box 6", "type": "box", "y": [null, null, null, null, null, null, null]}],
                        {"bargap": 0, "boxgap": 0, "hoverlabel": {"namelength": -1}, "showlegend": false, "title": {"text": "Good Boxplot"}, "xaxis": {"automargin": true, "range": [-0.5, 5.5], "rangemode": "normal", "zeroline": false}, "yaxis": {"automargin": true, "hoverformat": ",.1f", "rangemode": "normal", "title": {"text": "degC"}, "zeroline": false}}```

[archmoj]

Demo using codepen

[archmoj]

This looks like a bug!
And not a regression.
@laura-cbre thanks very much for reporting.

[etpinard]

Here are the relevant lines:

• we currently skipped over "empty" boxes when computing the positions:

plotly.js/src/traces/box/cross_trace_calc.js

Line 36 in 1f1b9b6

!t.empty &&

• we find the minimum difference between distinct categories (of the non-empty boxes) in:

plotly.js/src/traces/box/cross_trace_calc.js

Lines 71 to 72 in 1f1b9b6

	var boxdv = Lib.distinctVals(pointList);
	var dPos0 = boxdv.minDiff / 2;

to compute the width of the boxes.

---

I'm not sure what we can do at the moment to improve the behaviour in this situation w/o breaking other things.

---

The easiest workaround is to set width: 1 (or some number smaller than 1) in each of your box traces.

[alexcjohnson]

I believe we already have special logic for this case already for bar traces - specifically, on a category axis to disallow automatic widths greater than 1.

[etpinard]

As far as I understand, this issue is the box-variant of #1181

[alexcjohnson]

ha ok, I thought we had solved that but I guess it's still open for bars too

[laura-cbre]

@etpinard thank you for the workaround, it works nicely

[etpinard]

Merging into #1181