[charts] Fix y-axis tick label overlap when using log scale #18744
Conversation
|
Deploy preview: https://deploy-preview-18744--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 🔺+5.29KB(+0.04%) - Total Gzip Change: 🔺+913B(+0.02%) Show details for 100 more bundles (22 more not shown)@mui/x-charts parsed: 🔺+392B(+0.13%) gzip: 🔺+65B(+0.07%) |
CodSpeed Performance ReportMerging #18744 will not alter performanceComparing Summary
|
| @@ -175,7 +175,6 @@ export const rawData = [ | |||
| { code: 'SLB', population: 728147, gdpPerCapita: 2223.66502559565 }, | |||
| { code: 'SOM', population: 16030971, gdpPerCapita: 539.893931565468 }, | |||
| { code: 'ZAF', population: 59587885, gdpPerCapita: 6533.71121032856 }, | |||
| { code: 'KOR', population: 51764822, gdpPerCapita: 31902.4169048194 }, | |||
There was a problem hiding this comment.
This entry was duplicated:
| @@ -64,120 +64,148 @@ export type TickItemType = { | |||
| labelOffset: number; | |||
| }; | |||
|
|
|||
| export function useTicks( | |||
| export function getTicks( | |||
There was a problem hiding this comment.
The diff is a bit tricky, but transformed the of useMemo inside useTicks into getTicks so it's easier to test
| import { expect } from 'vitest'; | ||
| import { getTicks } from './useTicks'; | ||
|
|
||
| describe('getTicks', () => { |
There was a problem hiding this comment.
Second test is failing when running against the same code as master:
| */ | ||
| scale: AxisScaleConfig[S]['scale']; | ||
| /** | ||
| * The tick label shown by default if the value isn't formatted. |
There was a problem hiding this comment.
| * The tick label shown by default if the value isn't formatted. | |
| * The tick label shown by default if the value isn't formatted. | |
| * With log scale it can be an empty string to display ticks without labels. | |
| * @see See {@link https://d3js.org/d3-scale/log#log_tickFormat D3 log scale docs} for more details.``` |
There was a problem hiding this comment.
What is the reasoning for including the link to D3? I wasn't planning on doing that, but I also changed the docs a bit.
There was a problem hiding this comment.
My idea was per sentence
- Explicitly say that for log-scale formatted value can be an empty string. Which might be disturbing
- Link users to the root explanation about which tick gets a label and which don't get one.
If you find it more confusing than helping, no issue for not including that
997d1b2 to
bf067b0
Compare
| scale: AxisScaleConfig[S]['scale']; | ||
| /** | ||
| * The tick label shown by default if the value isn't formatted. | ||
| * This value might be an empty string if no tick label should be displayed, which is particularly useful in log |
There was a problem hiding this comment.
From what I know this behavior is specific to log scales. All the other ones always retruen a non empty string
Fixes #18239.
Fix y-axis tick label overlap when using log scale and a custom
valueFormatter.Testing
Added
zoom: trueto the y-axis of the demos below.Before:
Screen.Recording.2025-07-09.at.09.28.01.mov
After:
Screen.Recording.2025-07-09.at.09.27.26.mov