plotly / plotly/plotly.js

[BUG]: Violin plot width incorrectly calculated in grouped mode with multiple x-categories

Open
#7,611 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Description

When using violinmode: 'group' with violins at multiple x-axis categories, but without offsetgroup set, the width calculation uses the total number of traces across the entire plot instead of the number of traces at each x-position. This causes excessive empty space even when gap parameters are set to 0.

Screenshots/Video
Image
Steps to reproduce
<!DOCTYPE html>
<html>
<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-3.1.2.js'></script>
</head>
<body>
    <div id="myDiv"></div>
    <script>
        // Create data: 2 models × 3 evaluations = 6 traces total
        // But at each x-position, there are only 2 violins

        const models = ["Model A", "Model B"];
        const evals = ["Eval 1", "Eval 2", "Eval 3"];
        const colors = ["blue", "red"];

        const traces = [];

        models.forEach((model, modelIdx) => {
            evals.forEach((evalName, evalIdx) => {
                const yData = Array.from({length: 50}, () =>
                    Math.random() * 2 - 1 + modelIdx
                );

                traces.push({
                    type: 'violin',
                    x: Array(50).fill(evalName),
                    y: yData,
                    name: model,
                    legendgroup: model,
                    scalegroup: model,
                    // offsetgroup: model, // Uncomment to fix spacing
                    showlegend: evalIdx === 0,
                    line: { color: colors[modelIdx] }
                });
            });
        });

        const layout = {
            violinmode: 'group',
            violingap: 0,      // No gap between categories
            violingroupgap: 0, // No gap between groups
            title: 'Bug Demo: Excessive empty space despite gap=0'
        };

        Plotly.newPlot('myDiv', traces, layout);
    </script>
</body>
</html>
Notes
Root Cause

I think the issue is in src/traces/box/cross_trace_calc.js.

When traces are split across multiple x-categories (each trace appears at only one x-value) but offsetgroup is not set, the formula incorrectly uses the global trace count numTotal:

var num = nOffsetGroups || numTotal;
...
bdPos = dPos * groupFraction * groupGapFraction / num;

This should divide by the number of traces at each specific x-position, not the total number of traces in the plot.

Workaround

Uncommenting offsetgroup: model, below scalegroup: model, in the above code produces the expected behaviour with no space between violins. See the below image:
Image
However I don't believe this should be required - certainly it isn't mentioned in the docs.

Related

This probably also affects box plots since they share the width calculation logic in cross_trace_calc.js.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading src/traces/box/cross_trace_calc.js and reproduce the example with six violin traces, grouped mode, and no offsetgroup. Compare width allocation at each x-position with the current global-trace calculation, then verify that the grouped violin spacing matches the zero-gap settings and consider whether the shared box-plot logic is affected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.