Search code examples
reactjspie-chartapexchartsdonut-chart

How to make apex chart react pie bar thicker


How do i make the bar thicker?

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

 const series = [44, 55, 41, 17, 15];
 const options = {
 chart: {
 type: "donut"
 }
 };

 export default function PieChart() {
 return (
  <div>
  <Chart options={options} series={series} type="donut" height={300} />
  </div>
 );
 }

*sandbox sample here https://codesandbox.io/s/vigilant-pateu-tv4t5q?file=/src/App.tsx *


Solution

  • use plotOptions -> pie -> donut --> size to increase or decrease the donut size. Increasing the donut size would decrease the bar width & vice versa. Updated codesandbox

    const options = {
      chart: {
        type: "donut"
      },
      plotOptions: {
        pie: {
          donut: {
            size: "25%"
          }
        }
      }
    };