Legend item wrapping size should be more dynamic

[c-lamoureux]

Provide a general summary of the issue here

Legend items sometimes render in a single column despite having horizontal space and direction: "horizontal" configuration due to hardcoded column width calculation.

This is particularly noticeable with small chart sizes, which are valid and should be supported within reason.

codesandbox: https://codesandbox.io/p/devbox/bold-butterfly-s4q5hg

legendLabelWrap.json

🤔 Expected Behavior?

Legend should utilize available horizontal space efficiently, displaying multiple columns when labels are short enough to fit.

😯 Current Behavior

The legend column calculation uses a fixed 220px divisor that doesn't adapt to label content, causing inefficient space usage and forcing single-column layouts when multiple columns would fit.

• Chart width: 435px
• Column calculation: floor(435 / 220) = 1 column
• Result: Single column layout despite available horizontal space
• Legend labels: "123", "123", "123456" (all much shorter than 220px)

💁 Possible Solution

Utilize labelLimit prop

Use the configured labelLimit (default 184px) plus padding instead of hardcoded 220px:

return { signal: 'floor(width / (labelLimit + symbolWidth + padding))' };

Dynamic Calculation Based on Content

Calculate column width based on the longest actual label in the legend:

return { signal: 'floor(width / (maxLabelWidth + symbolWidth + padding))' };

🔦 Context

File: packages/vega-spec-builder/src/legend/legendUtils.ts

export const getColumns = (position: Position): SignalRef | undefined => {
  if (['left', 'right'].includes(position)) return;
  return { signal: 'floor(width / 220)' }; // <- Hardcoded 220px
};

The 220px divisor appears optimized for worst-case scenarios with maximum-length labels but doesn't consider:

• Actual label content lengths
• The configured labelLimit (default: 184px)
• Available space efficiency

🖥️ Steps to Reproduce

1. Create a chart with height 200px and width ~300px, varies based on legend content.
2. Add legend with short labels (< 50px each)
3. Set direction: "horizontal"
4. Observe single-column layout despite available space

Version

1.18.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS 15.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response