[question] MUI X Bar chart: is it possible to rotate/hide xAxis labels?

[St1ko]

Order ID or Support key 💳 (optional)

67005

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I want to display bar charts with a lot of records, the xAxis labels will start to overlap quite quickly. Is there a way to rotate the labels or hide every x-th label, so that the labels do not overlap?

Your environment 🌎

`npx @mui/envinfo`

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

[yaredtsy]

hey @St1ko

Yes, you can. You can add your own style by using the class name selector.

    [`.${axisClasses.bottom} .${axisClasses.tickLabel}`]: {
      transform: 'rotateZ(-45deg)',
    },

demo: https://codesandbox.io/s/distracted-bartik-5nf433?file=/Demo.tsx

[alexfauquette]

As explained by @yaredtsy you can use CSS to manipulate the label. For hiding some tick labels, it is not yet feasible. The feature is in the backlog

[St1ko]

Thanks @yaredtsy and @alexfauquette