Skip to content

Conversation

bernardobelchior
Copy link
Member

@bernardobelchior bernardobelchior commented May 14, 2025

Fixes #17839.

Add grouped axes demo. To achieve this, I added the axis ID to the class names so it's easier to target the given axis.

I'm not very fond of the hack to make every third tick bigger than normal, but line elements' x and y properties cannot be styled using CSS.

Copy link

github-actions bot commented May 14, 2025

Thanks for adding a type label to the PR! 👍

@bernardobelchior bernardobelchior added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels May 14, 2025
@mui-bot
Copy link

mui-bot commented May 14, 2025

Deploy preview: https://deploy-preview-17848--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 2c242dc

Copy link

codspeed-hq bot commented May 14, 2025

CodSpeed Performance Report

Merging #17848 will not alter performance

Comparing bernardobelchior:grouped-axes (2c242dc) with master (ee34ca3)

Summary

✅ 9 untouched benchmarks

@alexfauquette
Copy link
Member

I'm not very fond of the hack to make every third tick bigger than normal, but line elements' x and y properties cannot be styled using CSS.

Most of the time those exemples looks like their is a real axis (here the monthsand a fake one (quarters) for display purpose.

I'm wondering is instead of hacking a multiple axes system, we should provide a recipe about "This is how to create your custom axis".

@JCQuintas
Copy link
Member

I'm wondering is instead of hacking a multiple axes system, we should provide a recipe about "This is how to create your custom axis".

Depending on the result it might be simpler to have this demo instead of a custom axis.

@bernardobelchior
Copy link
Member Author

I'm wondering is instead of hacking a multiple axes system, we should provide a recipe about "This is how to create your custom axis".

Yeah, I think we should, but I don't think that's a quick win. Looking at the work being done in ChartsXAxis, it seems like we need to encapsulate some logic into hooks and export them before we can create the docs.

If this is going to require a significant amount of effort, I don't think I can take this at the moment, so we need to decide whether we merge this demo, and pick this up later with the goal of creating a long-term solution for this problem.

What do you think?

@JCQuintas
Copy link
Member

Rather than showing how to create a custom GroupedAxis, should WE create it to simplify it up?

Though it might be overkill 🤔, as this is not a huge use-case.

😆

@bernardobelchior
Copy link
Member Author

Rather than showing how to create a custom GroupedAxis, should WE create it to simplify it up?

You mean create it in the library and export it? I think it makes sense long term, but I'm already working on the toolbar and zoom, don't want to spread myself too thin 😅

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's hacky, but a clean solution would require to reconsider the internals 👍

@alexfauquette
Copy link
Member

Could you create an issue the different limitations and the solution found by other libraries to support this case. It could be a nice v9 feature?

@bernardobelchior
Copy link
Member Author

Could you create an issue the different limitations and the solution found by other libraries to support this case. It could be a nice v9 feature?

Done: #17931

@bernardobelchior bernardobelchior merged commit 14fbe46 into mui:master May 21, 2025
24 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation. scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[charts] Create demo with nested axes (Year/Quarter)
4 participants