Closed NerdCowboy closed 6 months ago
The issue come from the DEFAULT_X_AXIS_KEY
which is the id of the axis we put by default if you provide nothing.
Since you provide an axis with xAxis={[{ reverse: true }]}
, it will get the id defaultized-x-axis-0
, because we allow the creation of multiple axes without id by generating ids defaultized-[x|y]-axis-[axis index]
Using topAxis="defaultized-x-axis-0"
should solve your issue.
For a long term fix. I think we could go with the DEFAULT_X_AXIS_KEY
being used for the first axis defined if no other id is provided . But that would be a breaking change
@alexfauquette apologies, I somehow managed to link to the wrong sandbox. I've updated my post with the correct link
For reference, this is what I previously had (I've since updated the sandbox to the working version)
<BarChart
dataset={dataset}
yAxis={[{ scaleType: "band", dataKey: "month" }]}
series={[
{ dataKey: "seoul", label: "Seoul rainfall", valueFormatter },
]}
layout="horizontal"
leftAxis={null}
bottomAxis={null}
topAxis={DEFAULT_X_AXIS_KEY}
rightAxis={DEFAULT_Y_AXIS_KEY}
margin={{ top: 30, bottom: 10 }}
xAxis={[{
label: "rainfall (mm)"
}]}
width={500}
height={400}
/>
I was copying exactly what Scatter chart does to move the axis, so I didn't initially add reverse
, but you're correct I need that for what I want to accomplish. The confusion for me is why moving the axes doesn't work exactly the same for Bar chart and Scatter chart.
I tried your suggestion and it gave me this error. looks like there's a typo.
MUI-X-Charts: id used for top axis "defaultized-x-axis-0" is not defined. Available ids are: deaultized-x-axis-0, DEFAULT_X_AXIS_KEY.
Removing "f" from "defaultized" fixed it.
For those that want the correct code, here is what I ended up having to use
<BarChart
dataset={dataset}
yAxis={[{ scaleType: "band", dataKey: "month" }]}
series={[
{ dataKey: "seoul", label: "Seoul rainfall", valueFormatter },
]}
layout="horizontal"
leftAxis={null}
rightAxis="deaultized-y-axis-0"
margin={{ bottom: 90 }}
slotProps={{
legend: {
position: {
horizontal: "middle",
vertical: "bottom",
},
},
}}
xAxis={[
{
label: "rainfall (mm)",
reverse: true,
},
]}
width={500}
height={400}
/>
I was copying exactly what Scatter chart does to move the axis, so I didn't initially add reverse
You don't use reverse, but the y-axis is defined
yAxis={[{ scaleType: "band", dataKey: "month" }]}
I should update the demo because the axis ids are too confusing. Or at list I should add a comment to explain its limitation.
Removing "f" from "defaultized" fixed it.
Yes, that's a typo that got fixed in the v7 https://github.com/mui/mui-x/pull/12461
I somehow managed to link to the wrong sandbox
No wories. For a reason I ignore most of the codesandbox I open today have the error "Invalid left-hand side in assignment" So I'm running the provided code in local env which is imperfect. That's why you are in a version with the typo and not me
I have a similar problem right now and I want to hide the ticks and axis lines but not the month. any suggestions?
I have a similar problem
What did you try?
used the styling for axis lines and ticks sx={{ // bottomAxis Line Styles "& .MuiChartsAxis-bottom .MuiChartsAxis-line": { strokeWidth: 0, }, // Ticks "& .MuiChartsAxis-tick": { strokeWidth: 0, }, }}
I have a similar problem right now and I want to hide the ticks and axis lines but not the month. any suggestions?
It seems to be working: https://stackblitz.com/edit/react-pbjrbl?file=Demo.tsx
@MRanjith26 since your issue is not directly related to this one, could you please open a new one with a minimal reproduction example (the stackblitz link above should be a good starting point) and an explanation about what is not working as expected in your example
:warning: 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.
@NerdCowboy: 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.
Steps to reproduce
Link to live example: (required) CodeSandbox
Steps:
Current behavior
Axis customization for BarChart hides axis labels
Expected behavior
Axis customization should show axis labels and act exactly like the ScatterChart
Context
Still trying to do a reverse horizontal bar chart per my previous ticket
Your environment
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo
Search keywords: bar chart, axis, reverse Order ID: 70251