MUI X LineChart not responsive

Question

I am using MUI X Line Chart but it is not responsive.

              <div className="grid sm:col-span-full lg:grid-cols-2 lg:grid-rows-3 lg:gap-8">
            <div className="overflow:hidden">
              <LineChart
                xAxis={[
                  {
                    id: "Years",
                    data: years,
                    scaleType: "utc",
                    valueFormatter: (date) =>
                      date.toLocaleDateString("en-US", {
                        year: "numeric",
                        month: "short",
                      }),
                  },
                ]}
                series={[
                  {
                    id: "France",
                    label: "Quarter",
                    data: FranceGDPperCapita,
                    stack: "total",
                    area: true,
                    showMark: true,
                  },
                ]}
                height={400}
                width={600}
                margin={{ left: 70 }}
              />
            </div>
          </div>

Answer 1

To make a LineChart component reactive, you need to remove the height and width properties and give the parent element a height and width that are reactive, as required.

For example:

    <div style={{ height: "300px", width: "100%" }}>
      <LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
      />
    </div>