Legend overlaps chart on rerender / dynamic update (layout broken) #5125
Description
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
- Render an Area chart with multiple dynamic series
- Set
legend.positionto"bottom"with center alignment - Update data or trigger rerender
- 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;