How can I place pie chart data labels on the center.

Here is my pie chart looks like.

The data label values are stuck on to the border of the chart. How can I move them a little bit to the center?

Here is my code.

import React from "react";
import Chart from "react-apexcharts";

const TopAttackVector = () => {
  return (
    <div className="font">
      <Chart
        className="mx-96"
        type="pie"
        width={450}
        height={250}
        series={[30, 30, 30]}
        options={{
          labels: [
            "Stolen Credentials",
            "Business Disruption",
            "Data Compromise",
          ],
          colors: ["#ce9f2c", "#062341", "#00BFFF", "#229466"],
          dataLabels: {
            enabled: true,
            offsetX: 30,
            style: {
              fontSize: "16px",
              fontFamily: "Helvetica, Arial, sans-serif",
              fontWeight: "bold",
            },
          },
          stroke: {
            width: 0,
          },
          legend: {
            fontSize: "14px",
            fontWeight: "bold",
            itemMargin: "left",
          },
        }}
      />
    </div>
  );
};

export default TopAttackVector;