如何在 ApexCharts 中将注释保持在范围内？

Question

我有一个图表，其中有几个注释点。其中一个点在 Y 轴范围内，但另一个不在 Y 轴范围内。

有没有办法自动让 ApexCharts 包含渲染范围内的每个注释，以便所有注释至少始终可见？

这就是我的图表的样子：

import ApexCharts from "apexcharts";

var options = {
  chart: {
    type: "line",
  },
  series: [
    {
      name: "sales",
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
    },
  ],
  xaxis: {
    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
  },
  annotations: {
    points: [
      {
        x: 1993,
        y: 150,
        marker: {
          size: 4,
          fillColor: "#f00",
          strokeColor: "transparent",
        },
      },
      {
        x: 1996,
        y: 50,
        marker: {
          size: 4,
          fillColor: "#f00",
          strokeColor: "transparent",
        },
      },
    ],
  },
};

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

chart.render();

这是我的图表和注释的工作示例。

Answer 1

我相信 ApexCharts 中存在一些内部错误，因为如果您设置

height: "200px"

，所有注释都会显示。但我假设您无法设置明确的高度，您可以将 yaxis 参数设置为类似的值，以强制图表将 yaxis 比例与注释的最大 y 位置匹配

  yaxis: {
    min: 0,
    max: 150, // Can set dinamicly using something like Math.max(...anotationsY);
  },