ApexCharts折线图正负值对应折线下方背景渐变实现问题咨询

我现在在用ApexCharts做一个折线图，已经搞定了两个需求点，但还有一个关于背景填充的问题卡壳了，想请教下大家怎么实现：

• 已经处理好的部分：
  • 标记点样式：根据数据点的正负值，设置了不同的描边颜色，标记点的样式已经正常生效
  • 折线颜色：通过配置区分了0轴上下的折线颜色，正数值用绿色，负数值用红色
• 待解决的问题：折线下方对应正负值的背景渐变填充，我希望0轴上方的折线区域下方填充绿色渐变，0轴下方的区域填充红色渐变，就像目标效果里那样（目标图展示：折线与0轴之间的区域，正负部分分别用对应颜色的渐变填充）

下面是我的代码：

HTML部分 #

<div id="chart"></div>
<script src="exp.js"></script>

JavaScript部分 #

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",
    strokeColor: value >= 0 ? "#157446" : "#C13446",
    strokeWidth: 1,
  };
});

var options = {
  chart: {
    height: 380,
    type: "line",
    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"
    ]
  },
  stroke: {
      curve: 'smooth',
      width: 2
  },
};

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

chart.render();

我目前的Demo里还没实现背景渐变的效果，想问问有没有办法在ApexCharts里配置出这种正负区域分色的折线下方背景填充？

备注：内容来源于stack exchange，提问作者Amir Doosti