apex chart donut items border raduis

Question

I am looking to make my donut chart items corners round please guide

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 const series = [54, 45];
  const options: ApexCharts.ApexOptions = {
    chart: {
      width: 380,
      type: 'donut',
    },
    labels: ['Active Users', 'Inactive Users'],
    plotOptions: {
      pie: {
        expandOnClick:false, 
        donut: {
          size:'85%',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '12px',
              fontWeight: '400',
              color: '#6E7191'
            },
            value: {
              show: true,
              fontSize: '22px',
              fontWeight: '600',
              color: '#2E285C'
            },
            total: {
              show: true,
              color: '#BCC1C8',
              fontWeight: 600,
            }
          }
        }
      }
    },
    dataLabels: {
      enabled: false,
    },
    responsive: [{
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          show: false
        }
      }
    }],
    legend: {
      position: 'left',
      offsetY: 50,
    },
    colors: ['#645CAA', '#BFACE0'],
    title: {
      text: '264',
      align: 'left',
      floating: false,
      style: {
        fontSize: '36px',
        fontWeight: '500',
        color: '#2E285C'
      },
    }
  }

<Chart series={series} options={options} type="donut" />

That I have been tried but I cannot find any solution to change border radius of this chart. I have searched on google but could not find it That I am writing because stackoverflow saying its too much code write Details(alflsjdfakfjlkasdhkf jdfjkhdfkjd kdjfjkdhfkjhd jfsdjhfkdh kdfhsdkfj jdfksjhdfkj ksdjfkdjhf jkjkdhfkdsf jhdfkhsfjk jsdhjfkhdk jfhsdkjf jfksjdh fjdksjhf djfkh kjdsjkf jfhskdf )

I would prefer chartjs for this purpose, as there already exmples like this one and great community support also. — Junaid Shaikh, Feb 22 '23 at 06:56
sorry but it is not achievable, look what maker of apexcharts said `https://github.com/apexcharts/apexcharts.js/issues/910#issuecomment-529864711` — Junaid Shaikh, Feb 22 '23 at 07:33

haptn · Accepted Answer · 2023-05-12T03:31:18.897

Sorry that I couldn't find any official solutions for border-radius in Donut chart, however, you may try RadialBar or Circular Gauge chart as an alternative.

There, Apexchart provides you a lineCap option (in stroke), which allows 3 values butt, square & round. I also tried the lineCap: round for Donut chart but unfortunately, it didn't worked.

And, so, if you really need the border of the donut, you can create an issue in their GitHub.

apex chart donut items border raduis

1 Answers1