How to remove space below semi donut chart in Apexcharts?

Question

I am trying to show semi donut chart using Apexcharts. I want it to be responsive so I've set its height and width to auto, but it is still taking so much of extra space after donut and it's effecting my whole dashboard. Any idea how to remove this extra space?

Here's my current chart configuration.

      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> )