mui
[charts-pro] Show axis value in zoom slider tooltip
Show axis value in zoom slider tooltip instead of a value 0-100.
I had misunderstood the designs and we were never meant to show a range 0-100, so this PR is fixing that issue.
https://github.com/user-attachments/assets/53acddf3-0ac4-404b-958c-019b259bb155
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy preview: https://deploy-preview-18054--material-ui-x.netlify.app/
Bundle size report
Total Size Change:${\tiny{\color{red}▲}}$+4.5KB(+0.04%) - Total Gzip Change:${\tiny{\color{red}▲}}$+1.42KB(+0.04%) Files: 120 total (0 added, 0 removed, 31 changed)
@mui/x-charts-pro/ChartZoomSlider parsed:${\tiny{\color{red}▲}}$+646B(+0.97%) gzip:${\tiny{\color{red}▲}}$+214B(+0.90%) @mui/x-charts-pro/LineChartPro parsed:${\tiny{\color{red}▲}}$+608B(+0.27%) gzip:${\tiny{\color{red}▲}}$+186B(+0.25%) @mui/x-charts-pro parsed:${\tiny{\color{red}▲}}$+607B(+0.18%) gzip:${\tiny{\color{red}▲}}$+211B(+0.21%) @mui/x-charts-pro/BarChartPro parsed:${\tiny{\color{red}▲}}$+607B(+0.29%) gzip:${\tiny{\color{red}▲}}$+166B(+0.24%) @mui/x-charts-pro/ScatterChartPro parsed:${\tiny{\color{red}▲}}$+607B(+0.31%) gzip:${\tiny{\color{red}▲}}$+200B(+0.31%)
Show 26 more bundle changes
@mui/x-charts-pro/ChartsToolbarPro parsed:${\tiny{\color{red}▲}}$+60B(+0.10%) gzip:${\tiny{\color{red}▲}}$+17B(+0.08%) @mui/x-charts/ChartsXAxis parsed:${\tiny{\color{red}▲}}$+58B(+0.09%) gzip:${\tiny{\color{red}▲}}$+17B(+0.07%) @mui/x-charts/ChartsYAxis parsed:${\tiny{\color{red}▲}}$+56B(+0.09%) gzip:${\tiny{\color{red}▲}}$+18B(+0.08%) @mui/x-charts-pro/ChartDataProviderPro parsed:${\tiny{\color{red}▲}}$+55B(+0.04%) gzip:${\tiny{\color{red}▲}}$+20B(+0.04%) @mui/x-charts-pro/Heatmap parsed:${\tiny{\color{red}▲}}$+55B(+0.03%) gzip:${\tiny{\color{red}▲}}$+16B(+0.03%) @mui/x-charts/ChartsAxis parsed:${\tiny{\color{red}▲}}$+55B(+0.08%) gzip:${\tiny{\color{red}▲}}$+16B(+0.06%) @mui/x-charts/LineChart parsed:${\tiny{\color{red}▲}}$+55B(+0.03%) gzip:${\tiny{\color{red}▲}}$+15B(+0.02%) @mui/x-charts parsed:${\tiny{\color{red}▲}}$+54B(+0.02%) gzip:${\tiny{\color{red}▲}}$+17B(+0.02%) @mui/x-charts-pro/ChartContainerPro parsed:${\tiny{\color{red}▲}}$+54B(+0.04%) gzip:${\tiny{\color{red}▲}}$+22B(+0.05%) @mui/x-charts-pro/FunnelChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+20B(+0.03%) @mui/x-charts-pro/PieChartPro parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+16B(+0.03%) @mui/x-charts-pro/RadarChartPro parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+17B(+0.03%) @mui/x-charts/BarChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+17B(+0.03%) @mui/x-charts/ChartContainer parsed:${\tiny{\color{red}▲}}$+54B(+0.05%) gzip:${\tiny{\color{red}▲}}$+17B(+0.04%) @mui/x-charts/ChartDataProvider parsed:${\tiny{\color{red}▲}}$+54B(+0.05%) gzip:${\tiny{\color{red}▲}}$+16B(+0.04%) @mui/x-charts/ChartsAxisHighlight parsed:${\tiny{\color{red}▲}}$+54B(+0.09%) gzip:${\tiny{\color{red}▲}}$+17B(+0.08%) @mui/x-charts/ChartsGrid parsed:${\tiny{\color{red}▲}}$+54B(+0.09%) gzip:${\tiny{\color{red}▲}}$+16B(+0.08%) @mui/x-charts/ChartsLegend parsed:${\tiny{\color{red}▲}}$+54B(+0.08%) gzip:${\tiny{\color{red}▲}}$+16B(+0.06%) @mui/x-charts/ChartsReferenceLine parsed:${\tiny{\color{red}▲}}$+54B(+0.09%) gzip:${\tiny{\color{red}▲}}$+16B(+0.07%) @mui/x-charts/ChartsSurface parsed:${\tiny{\color{red}▲}}$+54B(+0.09%) gzip:${\tiny{\color{red}▲}}$+16B(+0.08%) @mui/x-charts/ChartsTooltip parsed:${\tiny{\color{red}▲}}$+54B(+0.07%) gzip:${\tiny{\color{red}▲}}$+16B(+0.06%) @mui/x-charts/Gauge parsed:${\tiny{\color{red}▲}}$+54B(+0.05%) gzip:${\tiny{\color{red}▲}}$+16B(+0.04%) @mui/x-charts/PieChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+18B(+0.03%) @mui/x-charts/RadarChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+16B(+0.03%) @mui/x-charts/ScatterChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+17B(+0.03%) @mui/x-charts/SparkLineChart parsed:${\tiny{\color{red}▲}}$+54B(+0.03%) gzip:${\tiny{\color{red}▲}}$+18B(+0.03%)
Generated by :no_entry_sign: dangerJS against 4685fa0f57e403beff01276c4e93195e3ad27636
I wonder if we should have a default value formatter for the zoom slider tooltip, or just create one for the demo.
Otherwise, the zoom slider tooltips show too many decimal places:
https://github.com/user-attachments/assets/2c90fd90-4ea7-475f-b277-70cf5e3f910e
I was considering adding a default value formatter in the defaultizeAxis part. To avoid a breaking change, it would only format values from the zoom slider tooltip. What do you think?
CodSpeed Performance Report
Merging #18054 will not alter performance
Comparing bernardobelchior:chart-slider-tooltip-axis-value (4685fa0) with master (d8d7972)
Summary
✅ 9 untouched benchmarks
![codspeed-hq[bot] avatar](https://avatars.githubusercontent.com/in/257293?v=4 "Published by a pub.dev verified publisher"){kind=small}
I wonder if we should have a default value formatter for the zoom slider tooltip, or just create one for the demo.
I think it might be good to have one by default, though it could be tricky with small numbers, like, if you have a scale from 0 to 1 🫠
You can then add a way for users to override it if they want in another PR
I wonder if we should have a default value formatter for the zoom slider tooltip, or just create one for the demo.
I think it might be good to have one by default, though it could be tricky with small numbers, like, if you have a scale from 0 to 1 🫠
Yeah, I think with minimumSignificantDigits from Intl.NumberFormat we might be able to achieve what we want. I'll take a look.
You can then add a way for users to override it if they want in another PR
I'll just use the current valueFormatter, so users can already override it.
I'll just use the current
valueFormatter, so users can already override it.
nice
I'll just use the current
valueFormatter, so users can already override it.nice
I think this'll be harder than initially expected. I'll address it as a follow-up.
I don't think it will be n important issue. Most of the real-life examples I can think of are about time evolution, so the level of precision might be fixed in the formatting. For example, you always want to see the yyyy-mm-dd format.
On that aspect, maybe the zoom rounding could be smarter:
Let's take a chart with width 200px
- If zoom goes from 150.123 to 250.678: We have 1px=0.5 So rounding to 150.5, 250.5 would make sense
- If zoom goes from 1500.123 to 2500.678: We have 1px=5 So rounding to 150, 250 would make sense
On that aspect, maybe the zoom rounding could be smarter:
Let's take a chart with width 200px
- If zoom goes from 150.123 to 250.678: We have 1px=0.5 So rounding to 150.5, 250.5 would make sense
- If zoom goes from 1500.123 to 2500.678: We have 1px=5 So rounding to 150, 250 would make sense
Yeah, that's what I'd like to improve with the default formatter as a follow-up.
PR: https://github.com/mui/mui-x/pull/18178