What you are trying to achieve is an "area" chart type, not "line" chart.

Try changing your script to this:

const dataPoints = [-10, 3, -5, -18, -10, 12, 8]

const discreteMarkers = dataPoints.map((value, index) => {
  return {
    shape: "circle",
    size: 4,
    seriesIndex: 0,
    dataPointIndex: index,
    fillColor: "#ffffff",
    strokeWidth: 1,
  };
});

var options = {
  chart: {
    height: 380,
    type: "area",
    foreColor: '#aaa',
    zoom: {
      type: 'x',
      enabled: true,
      autoScaleYaxis: true
    },
  },
  series: [
    {
      name: "Series 1",
      data: dataPoints
    }
  ],
  stroke: {
    width: 5,
    curve: "monotoneCubic"
  },
  plotOptions: {
    line: {
      colors: {
        threshold: 0,
        colorAboveThreshold: '#157446',
        colorBelowThreshold: '#C13446',
      },
    },
  },
  markers: {
    discrete: discreteMarkers
  },
  grid: {
     borderColor: '#6D6D6D',
     strokeDashArray: 3,
  },
  xaxis: {
    categories: [
      "01 Jan",
      "02 Jan",
      "03 Jan",
      "04 Jan",
      "05 Jan",
      "06 Jan",
      "07 Jan"
    ]
  },
  dataLabels: {
    enabled: false
  },
  
  stroke: {
      curve: 'smooth',
      width: 2
  },
  fill: {
    type: "solid",
    colors: ["#E6F4EA" ]
  },
};

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

chart.render();

That would render this: