Plotly.js: Bug: Sometimes box and whiskers span multiple x axis ticks

Created on 23 Jan 2020 · 8Comments · Source: plotly/plotly.js

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}}```

bug

Source

laura-cbre

All 8 comments

Demo using codepen

archmoj on 23 Jan 2020

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

archmoj on 23 Jan 2020

👍1

Here are the relevant lines:

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

https://github.com/plotly/plotly.js/blob/1f1b9b66c5fc58c8ca14c226b6047c87c722c3d1/src/traces/box/cross_trace_calc.js#L36

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

https://github.com/plotly/plotly.js/blob/1f1b9b66c5fc58c8ca14c226b6047c87c722c3d1/src/traces/box/cross_trace_calc.js#L71-L72

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.

etpinard on 27 Jan 2020

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.