Skip to content

Gracefully handle long categorical legend labels (ellipsis/wrap/scroll) #3189

Description

@henryzhang-qorsa

Feature Request

Description of Problem:

When a categorical chart (Y Bar, Y Line, X/Y Scatter) has split-by groups
with long labels, I want the full legend labels to remain readable, so I can
tell the series apart without guessing or resizing the viewer.

Today the categorical legend labels are drawn at full length and hard-clipped
at the chart canvas boundary. There is no ellipsis, no wrapping, and no
horizontal scroll, so labels are cut off mid-character with no indication they
were truncated. The amount of visible text depends only on the fixed
legend-band width, not on the available space — widening the viewer doesn't
help, and narrowing it makes it worse.

Reproducible on the hosted demo (Superstore dataset) at
https://perspective-dev.github.io/block.html?example=superstore: open the
settings drawer, set Plugin to Y Bar, and observe the legend on the right edge.
A label like Global Push Button Manager's Chair, Indigo is silently clipped
at an arbitrary character.

Environment: @perspective-dev/viewer-charts 4.5.1 (WASM client), Edge
148.0.3967.96, Windows 11. No console errors — purely a rendering issue.

Potential Solutions:

Route the categorical-legend label through the same ellipsis/measureText
fitting helper the bundle already uses for axis tick labels (the binary-search
routine that appends \u2026 to fit a target width), constrained to the legend
band width. From inspecting the 4.5.1 bundle, the legend is painted onto the
chart <canvas> via ctx.fillText(label, x, y) with no maxWidth argument and
no fitting logic, so this looks like a small, localized change. Drawback:
truncation still loses information, just gracefully — the full label would only
be visible on hover/tooltip (if added).

Alternatives considered:

  • Wrap long labels onto multiple lines. Trade-off: consumes more vertical
    space and complicates legend layout/height calculation.
  • Make the legend band scrollable (horizontal or vertical). Trade-off:
    scroll affordances on a canvas-painted legend are harder to implement than
    text fitting and may feel out of place in a chart.
  • Auto-size the legend band to the widest label up to some cap. Trade-off:
    steals plot area from the chart and still needs a fallback (ellipsis) past
    the cap.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions