Legend overlaps chart on rerender / dynamic update (layout broken)

[HussainAhmadDev]

Description

The legend randomly overlaps the chart area instead of staying in the assigned position. It happens inconsistently, especially when the chart rerenders, updates its data or the browser window resizes. The legend placement becomes unpredictable and breaks the visual layout.

This issue occurs without changing the chart config and has been seen multiple times with dynamic data loading.

Steps to Reproduce

1. Render an Area chart with multiple dynamic series
2. Set legend.position to "bottom" with center alignment
3. Update data or trigger rerender
4. Sometimes the legend shifts upward into the chart area and overlaps graph elements

Expected Behavior

Legend should always stay below the chart, without overlapping plotted data.

Actual Behavior

Legend jumps inside the chart area and disrupts readability. Overlaps markers and lines.

Screenshots

Code Sample

import ApexChart from "react-apexcharts";
import { IProps } from "./types";
import { useTheme } from "@mui/material";

export const AreaChart = ({ series, width, height }: IProps) => {
  const theme = useTheme();

  const options: ApexCharts.ApexOptions = {
    chart: {
      height: height || 500,
      foreColor: theme.palette.text.primary,
      toolbar: {
        show: true,
        tools: {
          download: true,
          selection: false,
          zoom: false,
          zoomin: false,
          zoomout: false,
          pan: false,
          reset: false,
        },
      },
      zoom: { enabled: false },
      animations: {
        enabled: true,
        easing: "easeinout",
        speed: 800,
        animateGradually: {
          enabled: true,
          delay: 150,
        },
        dynamicAnimation: {
          enabled: true,
          speed: 350,
        },
      },
    },
    dataLabels: { enabled: false },
    markers: {
      size: 6,
      strokeWidth: 2,
      strokeColors: theme.palette.background.paper,
      hover: { size: 8 },
    },
    legend: {
      position: "bottom",
      horizontalAlign: "center",
      offsetY: 10,
      offsetX: 0,
      itemMargin: {
        horizontal: 10,
        vertical: 5,
      },
      markers: {
        width: 12,
        height: 12,
        radius: 12,
        offsetX: -2,
        offsetY: 1,
      },
      labels: {
        colors: theme.palette.text.primary,
        useSeriesColors: false,
      },
      fontSize: "12px",
      fontFamily: theme.typography.fontFamily,
      onItemClick: {
        toggleDataSeries: true,
      },
      onItemHover: {
        highlightDataSeries: true,
      },
    },
    stroke: {
      curve: "smooth",
      width: 3,
      lineCap: "round",
    },
    xaxis: {
      type: "category",
      labels: {
        style: {
          colors: theme.palette.text.secondary,
          fontSize: "11px",
          fontFamily: theme.typography.fontFamily,
        },
        trim: true,
        hideOverlappingLabels: true,
        rotate: 0,
      },
      axisTicks: {
        show: true,
        color: theme.palette.divider,
      },
      axisBorder: {
        show: true,
        color: theme.palette.divider,
      },
      tooltip: {
        enabled: false,
      },
    },
    yaxis: {
      tickAmount: 4,
      labels: {
        style: {
          colors: theme.palette.text.secondary,
          fontSize: "11px",
          fontFamily: theme.typography.fontFamily,
        },
        formatter: (value) => {
          return value.toFixed(1);
        },
      },
      axisTicks: {
        show: true,
        color: theme.palette.divider,
      },
      axisBorder: {
        show: true,
        color: theme.palette.divider,
      },
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        type: "vertical",
        shadeIntensity: 0.5,
        inverseColors: true,
        opacityFrom: 0.7,
        opacityTo: 0.2,
        stops: [0, 90, 100],
      },
    },
    grid: {
      show: true,
      borderColor: theme.palette.divider,
      strokeDashArray: 4,
      xaxis: {
        lines: {
          show: true,
        },
      },
      yaxis: {
        lines: {
          show: true,
        },
      },
      padding: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10,
      },
    },
    tooltip: {
      theme: theme.palette.mode,
      style: {
        fontSize: "12px",
        fontFamily: theme.typography.fontFamily,
      },
      x: {
        show: true,
        format: "HH:mm:ss",
        formatter: undefined,
      },
    },
  };

  return (
    <div
      style={{
        position: "relative",
        width: width || "100%",
        height: height || "500px",
      }}
    >
      <ApexChart
        type="area"
        options={options}
        series={series}
        height={height || 500}
        width={width || "100%"}
      />
    </div>
  );
};

export default AreaChart;

[brianlagunas]

Please provide a working sample and not a code snippet or this will be closed.

[HussainAhmadDev]

@brianlagunas Sure - here is the sandbox with the same issue:
Sandbox