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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions