I’m working with MUI linechart, I’m probably doing something wrong but when I create my chart many times on mobile resolution labels on a chart seems to be overflowing outsite of the screen. (see picture bellow).

I found this question and tried to set width / height of parent element however it doesn’t seems to work. At least not for normal width, If I go for something like 50% with it still shows labels on a right but because graph is on 50% it is not overflowing.

Is there some other way how I can fix this?

Here is my minimmal code example:

<LineChart
  xAxis={[
    {
      data: [new Date(2022, 1, 1), new Date(2022, 2, 1), new Date(2022, 3, 1), new Date(2023, 1, 1), new Date(2023, 4, 1), new Date(2024, 1, 1)],
      scaleType: 'time',
    },
  ]}
  series={[
    {
      id: 'checkpoints',
      data: [0, 10000, 20000, 30000, 40000, 50000],
      label: t('mileage'),
      area: true,
      color: '#7000FF',
    },
  ]}
></LineChart>

Here is how it looks like on iPhone XR: