Skip to content

[Insights] Fix canFitLabelContent logic in victory-native by introducing labelOverflow setting #80971

Description

@mateuuszzzzz

If you haven't already, check out our contributing guidelines and patch guidelines for information on how to manage patches.


Patch Information

Library Name: victory-native
Library Version: 41.20.2
Patch Number: 002
Patch Description: add-label-overflow-prop
Full Patch Filename: victory-native+41.20.2+002+add-label-overflow-prop.patch

Patch Details

Reason for Patch

Victory Native's XAxis applies a canFitLabelContent bounds check that hides labels whose extent exceeds the chart boundaries. When consumers already control label visibility via formatXLabel (returning '' for skipped labels), this creates double-filtering — labels are hidden both by the consumer's skip logic and by Victory's bounds check. This causes non-uniform gaps and missing end labels even when there is visible space.

Changes Made

Added a labelOverflow prop to XAxisInputProps in src/types.ts:

  • "hidden" (default) — current behavior, bounds check active
  • "visible" — skip the canFitLabelContent check, render all labels with non-empty text

In src/cartesian/components/XAxis.tsx, the rendering condition changes from:

font && labelWidth && canFitLabelContent

to:

font && labelWidth && (labelOverflow === "visible" || canFitLabelContent)

Labels with empty text still get hidden naturally because labelWidth evaluates to 0 (falsy). Default behavior is unchanged — when labelOverflow is not set, undefined === "visible" is false, so it falls through to canFitLabelContent.

Upstream Status

Upstream PR/Issue: TBD

Related Information

PR Introducing Patch: #80967

Additional Notes

This patch depends on 001 (fix-rotated-label-bounds-check) being applied first, as both modify XAxis.tsx. The two patches address independent concerns: 001 fixes the bounds check math for rotated labels, while 002 lets consumers opt out of the bounds check entirely.

Checklist

  • Patch file is correctly named and placed in the appropriate directory
  • Patch is documented in the corresponding details.md file
  • This issue is linked in the details.md file
  • Upstream PR/issue has been created (if applicable)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions