Skip to content

Fix overlapping axis labels on smaller viewports #28239

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.

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

Merged
merged 5 commits into from
Jun 19, 2023

Conversation

krkshitij
Copy link
Contributor

@krkshitij krkshitij commented Jun 16, 2023

Previous Behavior

X-axis labels start overlapping when the window is zoomed in, or the window size is reduced

New Behavior

Scrollbar becomes visible when the viewport is smaller than the minimum width of the cartesian chart

  • The minimum width is larger than it should be for some charts with string axis and 2:1 spacing
  • Test cases to check if the cartesian charts are readable on smaller viewports:
    • Shrink the window and reload the chart when width and height props are not provided
    • Zoom in the window and reload the chart when width and height props are not provided
    • Decrease the width and height props passed to the chart

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 16, 2023

📊 Bundle size report

🤖 This report was generated against 1a277b9c4d55bc1b7c65a73383425b1934ec1dad

@size-auditor
Copy link

size-auditor bot commented Jun 16, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 1a277b9c4d55bc1b7c65a73383425b1934ec1dad (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 16, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2057314:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@krkshitij krkshitij changed the title set minimum width for cartesian chart Fix overlapping axis labels on smaller viewports Jun 16, 2023
@krkshitij krkshitij marked this pull request as ready for review June 16, 2023 19:33
@krkshitij krkshitij requested a review from a team as a code owner June 16, 2023 19:33
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.

Approving the PR. You can add explaining comments and merge.

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.

Approving the PR. You can add explanation comments and merge.

@krkshitij krkshitij merged commit 53292d2 into microsoft:master Jun 19, 2023
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-charting@v5.16.44 has been released which incorporates this pull request.:tada:

Handy links:

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 20, 2023
* master: (32 commits)
  applying package updates
  feat(react-tags): add styles for size (microsoft#28229)
  docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176)
  bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258)
  applying package updates
  fix: TableHeaderCell should not render button when not sortable (microsoft#28097)
  fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112)
  Fix overlapping axis labels on smaller viewports (microsoft#28239)
  useArrowNavigationGroup grid-linear axis (microsoft#28253)
  applying package updates
  fix: Alert example missing aria-label for icon (microsoft#28234)
  Overflow divider fix (microsoft#28011)
  feat(tools): implement `cypress-component-configuration` generator (microsoft#28115)
  chore: migrate to TS 4.7 (microsoft#28067)
  fix(scripts-tasks): make generate-api work in deterministic way (microsoft#28215)
  feat(react-tags): add overflow story (microsoft#28012)
  Structure and slots for SearchBox, using Input as a slot (microsoft#28090)
  feat(tokens): Add/update theme tokens (microsoft#27791)
  feat(react-tags): add a11y role and best practices guide (microsoft#28075)
  fix: Toast intent should always be present in the context (microsoft#28226)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 22, 2023
* master: (95 commits)
  docs(react-drawer): improve drawer stories examples (microsoft#28283)
  bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout (microsoft#28272)
  Doc: Tree Infinite Scrolling (microsoft#28197)
  fix(react-card): infer a11y id from immediate header element (microsoft#28266)
  Fixed bugs and added more stories to the Breadcrumb (microsoft#28267)
  refactor: Keep vanillajs code only where needed (microsoft#28278)
  fix: correcting focus behavior of react-search (microsoft#28241)
  Tooltip : updated tooltip styles (microsoft#28264)
  applying package updates
  feat(react-tags): add styles for size (microsoft#28229)
  docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176)
  bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258)
  applying package updates
  fix: TableHeaderCell should not render button when not sortable (microsoft#28097)
  fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112)
  Fix overlapping axis labels on smaller viewports (microsoft#28239)
  useArrowNavigationGroup grid-linear axis (microsoft#28253)
  applying package updates
  fix: Alert example missing aria-label for icon (microsoft#28234)
  Overflow divider fix (microsoft#28011)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants