[question] About ResponsiveChartContainer, is there a way to get staggered tick labels on the axis.

[ZaidLinkEZ]

The problem in depth

I want to get staggered tick labels on my ResponsiveChartContainer, mainly on bar charts. Check the following image for reference.

Your environment

`npx @mui/envinfo`

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

Search keywords: x-charts, tick labels, axis labels, ticks

Order ID: 95670

[alexfauquette]

That's not currently supported. The solution would be to create your custom x-axis component.

The code of our x-axis is here, but it can be simplified a lot if you only plan to support bar chart.
https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

Something that is not clear for me is if in your usecase the axis label should always be staggered or if it should only occurs when labels are to close from each over

[ZaidLinkEZ]

That's not currently supported. The solution would be to create your custom x-axis component.

The code of our x-axis is here, but it can be simplified a lot if you only plan to support bar chart. https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

Something that is not clear for me is if in your usecase the axis label should always be staggered or if it should only occurs when labels are to close from each over

Okay, for me the usecase is basically we want the staggering to be controllable from server side, and I control it using a flag. Multiple instances of the charts exist and some having longer tick labels. Thus I want to force the tick labels and also make them staggered

[JCQuintas]

@ZaidLinkEZ a quick solution is to use an axis value formatter like this:

const axisFormatter = () => {
  let count = 0;
  return (value: string, context: AxisValueFormatterContext) => {
    count++;
    return context.location === "tick"
      ? `${count % 2 === 0 ? " \n" : ""}${value.slice(0, 3)} \n2023`
      : `${value} 2023`;
  };
};

the " \n" uses a NO-BREAK SPACE.

And you can see it in action here: https://codesandbox.io/p/sandbox/intelligent-mopsa-ygwjrd

[ZaidLinkEZ]

Okay, this is a pretty cool workaround. Thanks a lot for this @JCQuintas , also let me know if there will be a possibility of supporting these staggered tick label feature in the future, or this will be it. Anyways, thanks again for the solution.