CODEWITHSUNDEEP
javascriptreactjsapexcharts
Teshie Ethiopia
Teshie Ethiopia

Reputation: 666

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;

Upvotes: 2

Views: 2648

Answers (1)

Patryk Laszuk
Patryk Laszuk

Reputation: 1440

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

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

Upvotes: 2

Related Questions