-
Notifications
You must be signed in to change notification settings - Fork 2.9k
feat(react-charts): improve x-axis tick label layout with automatic wrapping, truncation, or multi-level rendering based on available space #35522
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
base: master
Are you sure you want to change the base?
Conversation
… or multi-level rendering based on available space
|
Pull request demo site: URL |
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png | 6 | Changed |
vr-tests-react-components/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 858 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 3297 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 3336 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png | 854 | Changed |
vr-tests-react-components/Charts-DonutChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 30791 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 12638 | Changed |
vr-tests-react-components/Charts-LineChart 5 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-LineChart.Basic - Dark Mode.default.chromium.png | 786 | Changed |
| vr-tests-react-components/Charts-LineChart.Basic - Dark Mode.hover.chromium.png | 3956 | Changed |
| vr-tests-react-components/Charts-LineChart.Basic - RTL.default.chromium.png | 703 | Changed |
| vr-tests-react-components/Charts-LineChart.Basic.default.chromium.png | 704 | Changed |
| vr-tests-react-components/Charts-LineChart.Basic.hover.chromium.png | 2924 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 842 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 881 | Changed |
There were 1 duplicate changes discarded. Check the build logs for more information.
📊 Bundle size reportUnchanged fixtures
|
86e1fe2 to
e2c8d23
Compare
| .html(originalDataArray[i]) | ||
| .style('left', event.pageX + 'px') | ||
| .style('top', event.pageY - 28 + 'px'); | ||
| .html(fullLabel) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this .html using the innerHtml function from d3 internally.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it does. Changed it to text() to fix the vulnerability.


Previous Behavior
New Behavior
Related Issue(s)