javascript - 在顶点图表的面积图中准确显示工具提示

Question

所以基本上我试图在使用 Apex 图表的带有负值的面积图的标记顶部显示包含数据的自定义工具提示。

所以我想要实现的就是这个，如下图所示：

我怎么可能做到这一点？

 const areaOptions = {
    colors: ['#449A91', '#E24E73'],
    chart: {
      type: "area",
      height: 350,
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "smooth",
      width: 0,
      dashArray: 0, 
    },
  
    title: {
     show: false
    },
    xaxis: {
      type: "datetime",
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      position: 'top',
      min: Date.now() - (1*86400000000),
      tooltip: {
        enabled: false,
      },
      crosshairs: {
        show: false,
      }
    },
    yaxis: {
      show: false,
      tickAmount: 4,
      floating: false,
  
      labels: {
        style: {
          colors: "#8e8da4"
        },
        offsetY: -7,
        offsetX: 0
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      tooltip: {
        enabled: true,
    },
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'light',
        type: "vertical",
        opacityFrom: 0.3,
        opacityTo: 1,
        shadeIntensity: 0.5,
        gradientToColors: ['#B6E7D7', '#E37D76'],
        stops: [0, 50, 100],
      }
    },
    tooltip: {
      shared: false,
      custom: function ({ series, seriesIndex, dataPointIndex, w }) {
        var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
  
        return (
          '<div class="custom-tooltip">' +
            '<div class="goal">' + data.title + "</div>" +
            '<div class="date">' + data.x + "</div>" +
          "</div>" +
          '<div class="flex-rectangle"/>'
        );
      }
    },
    strokes: {
      show: true,
      curve: "smooth"
    },
    markers: {
      size: [6, 6],
      showNullDataPoints: false,
    },
    grid: {
      yaxis: {
        lines: {
          // offsetX: -30
          show: false,
        }
      },
      padding: {
        left: 20,
        top: 20
      }
    }
};

这些是传递到面积图的选项。

这就是我现在所拥有的：

标签： javascriptcssreactjsfrontendapexcharts