Search code examples
javascriptreactjsapexcharts

How to move the data lables to the center in react apex charts

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

Here is my pie chart looks like. enter image description here

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;
Solution

  • Change dataLabels offset in plotOptions https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset

    plotOptions: {
  pie: {
    dataLabels: {
      offset: -50,
    }, 
  }
}