Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(react-charting): hide overlapping x-axis tick labels #33678

Merged
merged 9 commits into from
Feb 12, 2025
Merged

feat(react-charting): hide overlapping x-axis tick labels #33678

merged 9 commits into from
Feb 12, 2025

Conversation

krkshitij
Copy link
Contributor

@krkshitij krkshitij commented Jan 16, 2025 •
edited
Loading

Cherry-pick of #32829

@krkshitij krkshitij requested a review from a team as a code owner January 16, 2025 20:00
@krkshitij krkshitij changed the base branch from user/atisjai/stronglyTypePlotly to master January 22, 2025 05:46
@krkshitij krkshitij changed the title Hide overlapping x-axis tick labels feat(react-charting): hide overlapping x-axis tick labels Jan 22, 2025
@krkshitij krkshitij requested a review from a team as a code owner January 22, 2025 06:01
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 22, 2025 •
edited
Loading

📊 Bundle size report

✅ No changes found

@github-actions GitHub Actions
Copy link

Pull request demo site: URL

@krkshitij krkshitij force-pushed the responsive-charts-v8 branch from e23631c to 381e599 Compare January 22, 2025 06:27
@krkshitij krkshitij removed the request for review from a team January 22, 2025 06:30
AtishayMsft
AtishayMsft approved these changes Feb 12, 2025
View reviewed changes
Copy link
Contributor

@AtishayMsft AtishayMsft left a comment

Choose a reason for hiding this comment

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

:shipit:

@AtishayMsft
Copy link
Contributor

I am seeing an issue with date.
For vertical bar dynamic if I select date and shrink the chart to lowest width, February and March are disappearing even when there is space to show at least 1. In this case we can show either short month or year atleast instead of removing the ticks altogether. Something to think as follow up.

@krkshitij krkshitij merged commit f9427b8 into microsoft:master Feb 12, 2025
16 checks passed
@krkshitij
Copy link
Contributor Author

I am seeing an issue with date. For vertical bar dynamic if I select date and shrink the chart to lowest width, February and March are disappearing even when there is space to show at least 1. In this case we can show either short month or year atleast instead of removing the ticks altogether. Something to think as follow up.

Yes, I have also noticed that issue. Currently, we calculate the number of ticks that can fit within the container width and pass that value to D3. But D3 often generates a different number of ticks than specified, which is more noticeable on a date axis.

To fix this, we can take a similar approach to the string axis - using D3 to generate an initial set of ticks based on a fixed count and then hiding overlapping ticks as the width decreases.

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

@fabricteam fabricteam fabricteam left review comments

@AtishayMsft AtishayMsft AtishayMsft approved these changes

Assignees

@AtishayMsft AtishayMsft

Labels
Package: charting
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@krkshitij @AtishayMsft @fabricteam