mui-x
mui-x copied to clipboard
[charts] Axis min/max does not allow dynamic rescaling of the other Axis when that axis has no min/max set
Steps to reproduce
Link to live example: https://next.mui.com/x/react-charts/axis/#axis-sub-domain
Use the min/max example and move the slider in either direction
Current behavior
Using the MUI X scatterplot example you can see that the Y axis scaling does not dynamically change when the visible sample of X axis data is changed by using the xAxis min/max attributes.
Expected behavior
If no min/max values are set for an axis, it should scale that axis to the min/max values available within the visible dataset.
Context
Using the following chart as an example:
When you change the X axis min value value (decreasing the timeslice) to display specific just the more recent data, I'd like the chart to dynamically define the Y axis scale for the visible data rather than relying on the scale established for the entire dataset. This is what happens today:
Your environment
npx @mui/envinfo
System:
OS: macOS 14.2.1
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 8.15.3 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
Browsers:
Chrome: 121.0.6167.160
Edge: Not Found
Safari: 17.2.1
npmPackages:
@emotion/react: latest => 11.11.3
@emotion/styled: latest => 11.11.0
@mui/base: 5.0.0-beta.36
@mui/core-downloads-tracker: 5.15.10
@mui/icons-material: ^5.15.9 => 5.15.10
@mui/lab: ^5.0.0-alpha.165 => 5.0.0-alpha.165
@mui/material: ^5.15.9 => 5.15.10
@mui/private-theming: 5.15.9
@mui/styled-engine: 5.15.9
@mui/system: ^5.15.9 => 5.15.9
@mui/types: 7.2.13
@mui/utils: 5.15.9
@mui/x-charts: next => 7.0.0-beta.2
@mui/x-tree-view: latest => 6.17.0
@types/react: 18.2.48
react: latest => 18.2.0
react-dom: latest => 18.2.0
typescript: latest => 4.9.5
I'm using Chrome: 121.0.6167.160
Search keywords: min max chart
perhaps this short video will help.... The series data points are floats (0.1 scale)
https://github.com/mui/mui-x/assets/1299716/c9b1b4b0-7d12-4164-858a-13d80bc1951b
So I can handle this myself if necessary by removing the older datapoints from the dataset I provide the chart, but this shifts a bit of heavy lifting to the consumer for what should be a pretty cool built-in feature.
one last example before I turn it over to y'all to classify / prioritize / dismiss / etc. This is the expected behavior:
https://github.com/mui/mui-x/assets/1299716/ab78e227-f703-42d4-80f9-a73925c76fc3
Here's that heavy lifting I was referring to:
- Build logic in backend service to limit sample size based on time offset
- Account for latency / lag introduced due to network time, processing, and rebinding
- Introduce a progress
indeterminate
or similar to block UI action while waiting (TO DO)
I suppose I could also build a client side loop into the dataset, taking account of the time offset (zoom level) and setting the yAxis min/max based on the min/max observed samples within that zoom level. This will definitely speed things up and in hindsight should've been the path I took to work-around this.
Thanks for the feedback
Effectively, the min
/max
are for now a just a basic way to override the displayed range of element, and the easiest solution might be to compute y min/max client side according to the data and the x range.
This feature might be supported when adding the "Zoom on mouse" in the pro package
@alexfauquette should we just move this to the board then? 🤷🏼
would love to see the "zoom on mouse" feature, would allow me to switch from the currennt lib i use to muix one.