[charts] Add symlog scale to charts #18729
Conversation
|
Deploy preview: https://deploy-preview-18729--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 🔺+45.7KB(+0.34%) - Total Gzip Change: 🔺+15.5KB(+0.38%) Show details for 100 more bundles (22 more not shown)@mui/x-charts-pro/ChartsToolbarPro parsed: 🔺+1.49KB(+2.24%) gzip: 🔺+500B(+2.11%) |
CodSpeed Performance ReportMerging #18729 will not alter performanceComparing Summary
|
d7a4417 to
bc0f33c
Compare
bc0f33c to
a11373b
Compare
a5a0cd1 to
55a8688
Compare
| const { negativeScale, linearScale, positiveScale } = generateScales(scale); | ||
|
|
||
| // Workaround for https://github.com/d3/d3-scale/issues/162 | ||
| scale.ticks = (count?: number) => { |
There was a problem hiding this comment.
For ticks to work, I'm breaking the symlog scale into three scales:
- Log scale for the < -constant;
- Linear scale for the [-constant, constant] interval;
- Log scale for > constant.
This then mean that we need to call each scale with the appropriate tick number. This is the solution that I quickly made.
Still need to test it more thoroughly, but it seems to work well.
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
55a8688 to
af328eb
Compare
| @@ -77,6 +77,16 @@ You can test all configuration options in the following demo: | |||
|
|
|||
| {{"demo": "TickPlacementBars.js"}} | |||
|
|
|||
| ### Log scale | |||
There was a problem hiding this comment.
Should this be in /axis page instead of bar/line pages? 🤔
There was a problem hiding this comment.
I'm afraid it won't be discoverable there. Do you think it'll be easy to find? That was the only reason I added the docs to these line/bar sections
There was a problem hiding this comment.
What about introducing the same baseline concept as in the line chart.
The behavior of baseline: 'min' looks perfect for a bar chart. with log scale. Except that the definition of this baseline is probably better in the axis definition than the series to enable stacking strategy 🤔
From that you could have the baseline section in both lines and bar charts pages. And an info point indicating that for log scale with negative and positive values, we also have a sym log scale, with a link to an axis section. And their you have all the space you want to explain symlog scale, advantage and issues in a single place.
There was a problem hiding this comment.
What are some use cases for the baseline? I'm failing to come up with one.
If we're worried about usage of the symlog scale, we can have a section in the axis docs and just a small section in bar/line that links there. Then we can explain why you should/shouldn't use the symlog scale. What do you think?
There was a problem hiding this comment.
If we're worried about usage of the symlog scale, we can have a section in the axis docs and just a small section in bar/line that links there. Then we can explain why you should/shouldn't use the symlog scale. What do you think?
This sounds good
What are some use cases for the baseline? I'm failing to come up with one.
In you're current demo for the bar chart, data varies from 1 to 10.000 which is nice because the symlog has a log scale that goes from 1 to whatever. But if your data goes from 0.01 to 100 (same data but divided by 100. Then a part of it is in the linear scale and another one in the log scale.
To get something more meaning full you would need to set constant: 0.01 in the y-axis. Which implies you know what is your minimal/maximal value.
My proposal is to use allows setting baseline: 'min' with log scale, such that if the minimal value is for example 0.01235, thanks to nice() the bar chart would display a log scale that starts at 0.01
And we keep the symlog only for bar charts with both positive and negative values. The case with 0 could be solved by skipping display
But that's more a follow-up to allow user better fine tune their choice between log and symlog
There was a problem hiding this comment.
This sounds good
Updated 👍
My proposal is to use allows setting baseline: 'min' with log scale, such that if the minimal value is for example 0.01235, thanks to nice() the bar chart would display a log scale that starts at 0.01
We could add that, yes. Baseline 'min' would only work for positive bars, though. If you have a mix of positive and negative bars, you'd need to use the symlog scale, I believe.
Would it also make sense to add a baseline with a specific value? It allows the creation of weird bar charts where the ratio between bars isn't correct, which I don't love, but there might be some valid use cases we aren't thinking of.
Created issue here.
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
af328eb to
930e151
Compare
|
The axis highlight does not work. Seems something is missing. Same with the area. I modified the line demo as follows Otherwise, I'm good with the tick hack. |
This seems a bug in the line highlight itself when the x-axis data isn't ordered: Screen.Recording.2025-07-16.at.15.34.59.movIf the x-axis data is ordered, then it works: Screen.Recording.2025-07-16.at.15.35.33.mov |
25ea92e to
9361d9f
Compare
Fixes #18516.
This PR adds a symlog scale, but with some differences compared to other scales.
Due to d3/d3-scale#162, by default ticks don't look good on a symlog scale:
Basically, symlog computes ticks as if it were a linear scale, but it isn't, so there's many overlaps and ticks don't make it clear that it's a log scale.
To work around this, I've created a wrapper scale that converts the symlog scale into three so that the ticks look better. You can read more about it here.
This might impact performance slightly, but we can try to optimize later if we feel it's a burden.
The ticks looks much better now:
Even when zooming, ticks look nice and without overlaps:
Screen.Recording.2025-07-10.at.16.46.47.mov
What I'd like to understand is: are you comfortable with this workaround? Another option would be to implement the proper tick formatting algorithm, which might either be available or we could adapt d3 log scale's.