In MUI X Charts, how to prevent LineChart Y axis label from overlapping with ticks labels?

Question

I have been using very basic LineChart that renders like this:

As you can see, the Money label is overlapping with the ticks. What is the best way of avoiding this?

Source of the LineChart:

  const xAxisMax = _.max(turns) ?? defaultXAxisMax
  const yAxisMax = _.max(money) ?? defaultYAxisMax
  return (
    <LineChart
      xAxis={[
        {
          data: turns,
          min: 1,
          max: xAxisMax,
          label: 'Turns',
          scaleType: 'linear',
        },
      ]}
      yAxis={[
        {
          min: 0,
          max: yAxisMax,
          label: 'Money',
          scaleType: 'linear',
          //labelStyle: { ??? },
        },
      ]}
      series={[
        {
          data: money,
        },
      ]}
      width={500}
      height={300}
    />
  )
}

Relevant lines from my npm ls

+-- @emotion/[email protected]
+-- @emotion/[email protected]
+-- @fontsource/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @mui/[email protected]
+-- @vitejs/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

In the docs, I found some mentions of example customizations here:

https://mui.com/x/react-charts/axis/#text-customization

which says:

<ScatterChart
  {/** ... */}
  bottomAxis={{
    labelStyle: {
      fontSize: 14,
      transform: `translateY(${
            // Hack that should be added in the lib latter.
            5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
          }px)`
    },
    tickLabelStyle: {
      angle: 45,
      textAnchor: 'start',
      fontSize: 12,
    },
  }}

This plus few other relevant articles make me believe I could somehow apply the labelStyle of yAxis. However, whatever I try, padding, margin, and so on, it always appears to be overridden/ignored by the rendered page, as inspected by Chrome DevTools.

However, transform appears to be actually rendered, e.g.:

labelStyle: { transform: 'rotate(-90deg)' },

but I do not know what is the correct value of transform to just shift the label a little bit more to the side.

Note I do not have any css customizations anywhere impacting any kind of layout. No custom layout in <ThemeProvider> and no other shenanigans.

Apulia

Answer 1

Here is the CSS solution for it, we can just add a class to the chart, to prevent the CSS affecting other charts!

MuiChartsYAxis-directionY docs

.custom-y-padding-bottom .MuiChartsAxis-directionY .MuiChartsAxis-label {
  transform: translateX(-10px) !important;
}

stackblitz

Landonlandor

Thanks, it works! Curiously, adding to LineChart's yAxis the following: labelStyle: { transform: 'translateX(-10px) !important' } appears to have no effect. – Apulia

Just to add: the approach in this answer is described in MUI docs as "Global CSS" here: mui.com/material-ui/guides/interoperability/#global-css – Apulia

@KonradJamrozik Actually, when I did that, the label got repositioned to somewhere outside the screen, so setting that property will not give a proper solution so I am suggesting this approach! – Landonlandor

Totally, already upvoted :) I just wanted to wait few days to give people time to answer and accept the best one :) – Apulia

Answer 2

To give more explanation about why using the labelStyle does not do anything:

The texts are structures as follow:

<g class="MuiChartsAxis-label">
  <text x=".." y=".." transform="...">
    <tspan>...</tspan>
  </text>
</g>

The labelStyle will add some style to the <text/> but the transform will never win face to the attributes.

The group with class MuiChartsAxis-label is here to let you manipulate the text position. By the way you might not need to us !important. See for example the demo of https://mui.com/x/react-charts/axis/#composition

Roselinerosella