In Apex Charts React, Line chart stacked on area chart, whenever I use multiple line and area in Series, the straight line is Visible as curve line.

[subodhdevpatel]

Describe the bug In Apex Charts React, Line chart stacked on area chart, whenever I use multiple line and area in Series, the straight line is Visible as curve line.

To Reproduce I have attached the code I am using while creating stack area graph, In the straight line graph which is added in series, it should be visible as a straight line as the value is [2,2],[4,4] but it is getting stacked over the area chart and can be seen as a curved line with wrong data on line.

here is the image of the issue I am facing

var options = {
  "chart": {
    "type": "area",
    "stacked": true,
    "stackOnlyBar": false
    //stackType:'normal'
  },
  "colors": [
    "#CECECE",
    "#E76F51",
    "#fcd757",
    "#2ec4b6",
    "#6563BB",
    "#000000"
  ],
  "dataLabels": {
    "enabled": false
  },
  "stroke": {
    "width": 2
  },
  "fill": {
    "type": "solid",
    "gradient": {
      "opacityFrom": 0.6,
      "opacityTo": 0.8
    }
  },
  "legend": {
    "position": "top",
    "horizontalAlign": "left"
  },
  "markers": {
    "size": 0.005
  },
  "tooltip": {
    "enabled": false,
    "shared": true,
    "inverseOrder": true,
    "fillSeriesColor": false,
    "y": {}
  },
  "xaxis": {
    "type": "datetime",
    "convertedCatToNumeric": false
  },
  "noData": {
    "text": "No data available",
    "style": {
      "fontSize": "18px"
    }
  },
  "yaxis":[{
    "min": 0,
    "max": 28.14,
    "labels": {}
  }],
  "series": [
    {
      "name": "Grey Zone",
      "type": "area", 
      "data": [
        [1709015776791, 8],
        [1709015673850, 0]
      ],
    },
    {
      "name": "Red Zone",
      "type": "area",
      "data": [
        [1709015776791, 4],
        [1709015673850, 4]
      ],
    },
    {
      "name": "Yellow Zone",
      "type": "area",
      "data": [
        [1709015776791, 6],
        [1709015673850, 6]
      ],
    },
    {
      "name": "Green Zone",
      "type": "area",
      "data": [
        [1709015776791, 10],
        [1709015673850, 10]
      ],
    },
    {
      "name": "Available Stock",
      "type": "line",
      "yAxisIndex": 1,
      "data": [
        [1709015776791, 2],
        [1709015673850, 2]
      ],
      "stacked":false,
      "stackSeries": false
    },
    {
      "name": "On Hand Stock",
      "type": "line",
      "yAxisIndex": 1,
      "data": [
        [1709015776791, 4],
        [1709015673850, 4]
      ],
      "stacked":false,
      "stackSeries": false
    },
  ]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Expected behavior I think, the graph should have a straight lineand area chart should be stacked onto each other behind those lines.

Environment (please complete the following information):

OS: Ubuntu Browser Firefox Apex Version: 3.46.0

Additional context None