Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Charts don't pass className to root element #13292

Closed
Janpot opened this issue May 29, 2024 · 7 comments · Fixed by #13647
Closed

[charts] Charts don't pass className to root element #13292

Janpot opened this issue May 29, 2024 · 7 comments · Fixed by #13647
Assignees
Labels
component: charts This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature

Comments

@Janpot
Copy link
Member

Janpot commented May 29, 2024

Steps to reproduce

Link to live example: (required)

Steps:

  1. Open https://mui.com/x/react-charts/line-demo/#simplelinechart
  2. Add className='foo' as a jsx attribute
  3. Inspect the dom

Current behavior

No class attribute in the dom:

Screenshot 2024-05-29 at 11 21 23

Expected behavior

Just like with e.g. Box or DataGrid, the root element has a foo class

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: className chart

@Janpot Janpot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 29, 2024
@flaviendelangle
Copy link
Member

This would be a good occasion to add describeConformance on the charts components
It checks this kind of things

@Janpot
Copy link
Member Author

Janpot commented May 29, 2024

It checks this kind of things

👍 Same for things like lineChartClasses I suppose? This was what I was initially looking for. To target the root class.

@flaviendelangle
Copy link
Member

I think that it also checks if the root class (lineChartClasses.root) is passed to the root DOM element yes.
But tbh I did not touch this for a long time.

@michelengelen michelengelen added enhancement This is not a bug, nor a new feature component: charts This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 29, 2024
@alexfauquette
Copy link
Member

About lineChartClasses it's a bit special because the root element is the chart container which is common to all components.

Kind of related to that issue: ResponsiveChartContainer has the <svg /> wrapped into a <div /> whereas the ChartContainer just renders the <svg />.

@Janpot
Copy link
Member Author

Janpot commented May 30, 2024

What I meant was that lineChartClasses (and responsiveChartContainerClasses ) is not exported from @mui/x-charts.

@alexfauquette
Copy link
Member

Passing the className to the root component should be straight forward. Having all the lineChartClasses, barChartClasses, ... might need more reflexion. Not sure it suit well with the charts set of components

Copy link

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Janpot: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants