[charts] Misconception about default axis ids

[NerdCowboy]

Steps to reproduce

Link to live example: (required)
CodeSandbox

Steps:

1. Add a BarChart component
2. Try to reverse the axis position per this example
3. Note the axis labels disappear entirely
   

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

npx @mui/envinfo

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

Search keywords: bar chart, axis, reverse
Order ID: 70251

[alexfauquette]

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

[NerdCowboy]

@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}
/>

[alexfauquette]

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 #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

[MRanjith26]

I have a similar problem right now and I want to hide the ticks and axis lines but not the month. any suggestions?

[alexfauquette]

I have a similar problem

What did you try?

[MRanjith26]

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?

[alexfauquette]

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

[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.

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