Options for adding a line to a stacked area chart?

[KevBell5]

I have a stacked area chart that I would like to add a line on. It looks like the only way you can stack an area chart is if all series are set to “area”, once I add a line series, it loses all stacking. My work around is to use two y-axis, placing a single area series on the alternate y-axis with a transparent fill. When I do this, the single series on the second y-axis is stacked with the other series. I’ve tried placing series in separate groups, but that didn’t help. Unfortunately, the line I want to add is not a single value so an annotation line is not a good option.

A simplified version Is posted below. The Budget line in the image is being stacked, but I’d like it to be on the second y-axis. I believe it is a similar/same issue as #3836

Any ideas/options on how to work around this and add a line to a stacked area chart?

`import ReactApexChart from "react-apexcharts"; // 1.7.0
import { ApexOptions } from "apexcharts"; // 4.3.0
const options : ApexOptions = {
chart: {
//type: "area", // Force chart type to area for stacking
stacked: true, // Enable stacking for area types
toolbar: { show: false },
},
stroke: {
width: [2, 2, 2, 3],
curve: "smooth",
},
fill: {
type: ["gradient", "gradient", "gradient", "solid"],
opacity: [0.8, 0.8, 0.8, 0],
},
dataLabels: {
enabled: false,
},
markers: {
size: [2, 2, 2, 0],
},
xaxis: {
type: "category",
categories: ["2020", "2021", "2022", "2023", "2024"],
},
yaxis: [
{
title: { text: "Amount ($)" },
min:0,
max:120000,
},
{
opposite: true,
show: true, // Eventually hide this
title: { text: "Budget" },
min:0,
max:120000,
},
],
legend: {
show: true,
position: "bottom",
},
grid: {
yaxis: { lines: { show: true } },
},
};

const series = [
{
name: "Living Expenses",
data: [30000, 32000, 35000, 37000, 40000],
color: "#3C50E0",
type: "area",
yaxisIndex: 0,
group: "one",
},
{
name: "Savings",
data: [10000, 12000, 15000, 18000, 20000],
color: "#97D885",
type: "area",
yaxisIndex: 0,
group: "one",
},
{
name: "Taxes",
data: [5000, 7000, 8000, 9000, 10000],
color: "#ec675c",
type: "area",
yaxisIndex: 0,
group: "one",
},
{
name: "Budget",
data: [45000, 45000, 45000, 47000, 47000],
color: "#ff00ff",
type: "area",
yaxisIndex: 1,
group: "two",
},
];

const ChartExample = () => {
return (

);
};

export default ChartExample;`