Background Transparent

[jiwonkim16]

In the code snippet below, I have set the background to transparent

`
export const CurrentWaterLevelChartOption = (
times,
lowReservoirLevel,
fullReservoirLevel,
): ApexOptions => ({
chart: {
id: "current-water-level",
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
},
},
background: "transparent",
dropShadow: {
enabled: true,
top: 2,
left: 2,
blur: 4,
opacity: 0.5,
},
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
enabled: true,
speed: 550,
},
},
},
theme: {
mode: "dark", // you can use 'dark' as well
palette: "palette3", // up to palette10
monochrome: {
enabled: false,
color: "#255aee",
shadeTo: "light",
},
},
xaxis: {
categories: times,
labels: {
style: {
colors: "white",
},
},
},
yaxis: {
show: true,
min: lowReservoirLevel,
max: fullReservoirLevel,
stepSize: 5,
labels: {
show: true,
style: {
colors: ["white"],
},
},
},
stroke: {
width: 5,
curve: "smooth",
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#E3F2FE", "#ffd700"],
shadeIntensity: 1,
type: "diagonal2",
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 90, 100],
},
},
grid: {
borderColor: "#ffffff",
strokeDashArray: 4,
},
tooltip: {
theme: "dark",
},
noData: {
text: "Loading...",
style: {
color: "tomato",
fontSize: "25px",
},
},
});

`
However, instead of applying a transparent background, a separate background color is being set as shown in the image. Could you please check if there is any mistake in the code