my-app/src/Components/BarPlot/index.jsx

import { Grid } from "@mui/material";
import Plot from "react-plotly.js";

export default function BarPlot({ variance }) {
  const dimensions = Array.from({ length: variance.length }, (_, i) => i + 1);

  return (
    <>
      <Grid item xs={12}>
        <Plot
          data={[
            {
              x: dimensions,
              y: variance,
              type: "bar",
              marker: { color: "blue" },
            },
          ]}
          layout={{
            title: "Variance across dimensions",
            xaxis: { title: "Dimension" },
            yaxis: { title: "Variance" },
            showlegend: false, // Remove legend
            autosize: true, // Enable autosizing
          }}
          useResizeHandler={true}
          style={{ width: "100%", height: "100%" }}
        />
      </Grid>
    </>
  );
}