[charts] How to add horizontal layout for Responsive charts?

[MainaMwangiy]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/react-zb9yvc-gyrtno?file=Demo.js and https://stackblitz.com/edit/react-nn5u1e-yjybdr?file=Demo.js
Steps:

1. Check two examples above and try to add layout: 'horizontal' property and it doesn't work.

Current behavior

https://stackblitz.com/edit/react-zb9yvc-gyrtno?file=Demo.js and https://stackblitz.com/edit/react-nn5u1e-yjybdr?file=Demo.js
charts are not adding horizontal layout when I add layout: 'horizontal on the code.

The working code for horizontal layout only works for when we do not have a responsive chart i.e. one that uses ResponsiveChartContainer. Take a look at this example from the documentation. https://mui.com/x/react-charts/bars/#system-HorizontalBars.js

Expected behavior

Looking for a way to add layout: 'horizontal' property on charts that are responsive and that are using ResponsiveChartContainer. When the chart is responsive, the property doesn't work. The documentation does not provide any other property for this.

Context

Need to have the following responsive charts in horizontal layout.

1. Multi Line charts - line charts having more than one line data and is responsive
2. Combined Bar and Line charts
3. Bar Chart

Your environment

npx @mui/envinfo

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

Search keywords: horizontal layout muix charts

[michelengelen]

Hey @MainaMwangiy and thanks for opening this feature request.
I did add it to the board for the charts team to have a look. 👍🏼

[alexfauquette]

The layout should be in the series not the axis or root props. Like in the example I shared with you here: #13084 (comment)

From the docs:

If you're using composition, you should set the property layout: 'horizontal' to each bar series object.

I don't think line chart support vertical layout yet

[github-actions]

⚠️ 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.

@MainaMwangiy: 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.