如何在 Apexcharts 中刪除半圓環圖下方的空間？

Question

我正在嘗試使用 Apexcharts 顯示半圓環圖。 我希望它具有響應性，因此我已將其高度和寬度設置為自動，但在甜甜圈之后它仍然占用了大量額外空間，並且它影響了我的整個儀表板。 知道如何刪除這個額外的空間嗎？

這是我當前的圖表配置。

      const options: ApexOptions = {
    chart: {
      type: "donut",
      height: "auto",
      width: "auto",
      parentHeightOffset: 0,
      sparkline: {
        enabled: true,
      },
      redrawOnWindowResize: true,
      redrawOnParentResize: true,
      events: {
        mounted: chart => {
          chart.windowResizeHandler()
        },
      },
    },
    stroke: {
      width: 0,
    },
    labels: labels,
    plotOptions: {
      pie: {
        startAngle: -90,
        endAngle: 90,
        donut: {
          size: "65%",
          background: "transparent",
          labels: {
            show: true,
            name: {
              show: false,
            },
          },
        },
      },
    },
    grid: {
      padding: {
        left: 0,
        right: 0,
        bottom: 0,
      },
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: false,
    },
  }
  return (
    <div className="chart" style={{ height: "auto", width: "auto" }}>
      <ReactApexChart options={options} series={series} type="donut" />
    </div> )

Answer 1

我認為，在父容器中指定高度和寬度將對您的情況有所幫助。

<div className="chart" style={{ height: "50px", width: "50px" }}>
   <ReactApexChart options={options} series={series} type="donut"  height="100%" width="100%" />
</div>

並從圖表中刪除高度和寬度選項

chart: {
   type: "donut",
   parentHeightOffset: 0,
   sparkline: {
      enabled: true,
   },
   ...
}