[charts] Infinite height if LineChart component prop height is not set and there is an another element in the div

[smarandaparincu]

Related page

https://next.mui.com/x/react-charts/lines/

Kind of issue

Broken demo

Issue description

If my component is as follows:

<LineChart
      dataset={dataEntries}
      xAxis={[{ ...xAxis }]}
      series={series}
      grid={{ horizontal: true, vertical: true }}
      sx={{
        [`& .${axisClasses.left} .${axisClasses.label}`]: {
          transform: 'translateX(-40px)',
        },
        [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3' },
      }}
      yAxis={[{ ...yAxis }]}
      slotProps={{ legend: { hidden: true } }}
      colors={blueberryTwilightPalette}
    />

Everything works as expected. As soon as that is wrapped in a div with a p element, the chart's height increase infintely

Context

I want my LineChart component to take the available space as well as add another component on top of it

Search keywords: height Mui/x-charts LineChart

[michelengelen]

Hey @smarandaparincu,

I cannot reproduce your issue. I did test it with this code:

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import { axisClasses, chartsGridClasses } from '@mui/x-charts';

export default function BasicLineChart() {
  return (
    <div style={{ height: '300px' }}>
      <p>Basic Line Chart</p>
      <LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
        grid={{ horizontal: true, vertical: true }}
        sx={{
          [`& .${axisClasses.left} .${axisClasses.label}`]: {
            transform: 'translateX(-40px)',
          },
          [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3' },
        }}
        slotProps={{ legend: { hidden: true } }}
      />
    </div>
  );
}

Codesandbox here

Could you check this with your implementation to see if this is what you want to achieve and if there are differences?

[smarandaparincu]

If you set the height like this: style={{ height: '100%' }}, you will get the behaviour I am describing

[michelengelen]

I still cannot reproduce the issue you are describing. Just note that the charts do need some form of intrinsic dimension to calculate correctly. This can be a container that restricts the dimensions (can be fluid as well), or on the chart itself using the width and height props.

This is the related docs page: Composition - Responsive

This is with style={{ height: '100%' }} on the div:

I could not reproduce any scenario where the chart would have infinite height.

[smarandaparincu]

Could you wrap it in a Grid? For example:

<Grid container spacing={2} sx={{ width: '100%', height: '100%' }}>
      <Grid item xs={12}> 
      <p>Basic Line Chart</p>
      <LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
        grid={{ horizontal: true, vertical: true }}
        sx={{
          [`& .${axisClasses.left} .${axisClasses.label}`]: {
            transform: 'translateX(-40px)',
          },
          [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3' },
        }}
        slotProps={{ legend: { hidden: true } }}
      />
      </Grid>
    </Grid> 

[michelengelen]

@alexfauquette I can confirm this bug now. For some reason it expands endlessly. This is the code snippet i used for it:

import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import { Grid } from '@mui/material';
import { axisClasses, chartsGridClasses } from '@mui/x-charts';

export default function ChartsOverviewDemo() {
  return (
    <Grid container spacing={2} sx={{ width: '100%', height: '100%' }}>
      <Grid item xs={12}>
        <p>Basic Line Chart</p>
        <LineChart
          xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
          series={[
            {
              data: [2, 5.5, 2, 8.5, 1.5, 5],
            },
          ]}
          grid={{ horizontal: true, vertical: true }}
          sx={{
            [`& .${axisClasses.left} .${axisClasses.label}`]: {
              transform: 'translateX(-40px)',
            },
            [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3' },
          }}
          slotProps={{ legend: { hidden: true } }}
        />
      </Grid>
    </Grid>
  );
}

I am not so sure if this can be considered a bug though . 🤔 WDYT?

[alexfauquette]

Looks like the parent size depends on the children, and of course when the chart set its height, the parent increase, then the chart adapt, and we enter an infinite loop.

Not sure we can do something for that

[michelengelen]

@smarandaparincu as @alexfauquette described we cannot do something about this. Depending on what you are trying to achieve it should be possible to do it without using a fully fluid container using flex.

Let us know if we can assist you in that. I will close the issue for now, but feel free to reopen. Thanks! 🙇🏼

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @smarandaparincu? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[isdisd2]

same problem...