Skip to content

Conversation

franciscaGrandon
Copy link

@franciscaGrandon franciscaGrandon commented Jul 22, 2025

Description

This PR adds 2 new options to the label prop of the Bar component:

  • labelRotate: To rotate the label using dregees.
  • format: To be able to add a prefix or suffix to the label element of the bar chart.

Fixes issue #528

Type of Change

  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

To test its function, I updated the example, bar-chart.tsx screen and tried with:

  • Different rotation degrees, while modifying the label position mostly in bottom and top options.
  • Added a simple prefix to the label.

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • I have run yarn run check:code and all checks pass
  • My changes generate no new warnings

Copy link

changeset-bot bot commented Jul 22, 2025

⚠️ No Changeset found

Latest commit: e7d5179

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Jul 22, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
victory-native-xl-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 22, 2025 8:04pm

@@ -46,19 +52,19 @@ export const BarGraphLabels = ({
// Bar Midpoints
const barVerticalMidpoint =
(chartInnerTopEdge + chartInnerBottomEdge + Number(y)) / 2;
const barHorizontalMidpoint = x - labelWidth / 2;
// Move the label left by half its width to properly center the text over the bar
// const barHorizontalMidpoint = x - labelWidth / 2;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changing this behavior with removing barHorizontalMidpoint feels like it'll break the layout of existing charts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants