¿Cómo puedo colocar etiquetas de datos de gráficos circulares en el centro?

Aquí está mi gráfico circular.

Los valores de la etiqueta de datos se pegan en el borde del gráfico. ¿Cómo puedo moverlos un poco hacia el centro?

Aquí está mi código.

 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;