when I set the startangle as -180deg and endangle as 90deg, svg img is not show fully in that type is RadialBar.

[smartdeveloper1030]

when I set the startangle as -180deg and endangle as 90deg, svg img is not show fully.

import React, { useEffect } from "react";
import ApexCharts from 'react-apexcharts';

interface PrgessProps {
value: number;
startAng: number;
endAng: number;
color: string;
}

const RingProgressBar: React.FC = (props) => {

useEffect(()=>{

}, [props.value])

const Coptions = {
    series: [props.value],

    chart: {
      type: 'radialBar',
      toolbar: {
        show: false
      },
      height: 350
    },

    plotOptions: {
      radialBar: {
        startAngle: props.startAng,
        endAngle: props.endAng,
        hollow: {
          margin: 0,
          size: '65%',
          background: 'transparent',
          image: undefined,
          imageOffsetX: 0,
          imageOffsetY: 0,
          position: 'front',
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24
          }
        },

        track: {
          background: '#22234B',
          strokeWidth: '100%',
          margin: 0,
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35
          }
        },

        dataLabels: {
          show: false,
          name: {
            offsetY: -10,
            show: true,
            color: '#888',
            fontSize: '17px'
          },

          value: {
            formatter: function(val: number) {
              return parseInt(val.toString());
            },
            color: '#111',
            fontSize: '36px',
            show: true
          }
        }
      }
    },
    
    fill: {
        type: 'gradient',
        gradient: {
          shade: 'dark',
          type: 'vertical',
          shadeIntensity: 0.5,
          gradientToColors: ['#22234B'],
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
    },
    stroke: {
        lineCap: 'round'
    },
    labels: ['Percent'],
    colors: [props.color],
  };

  return (
    <div 
        style={{
                filter: `drop-shadow(0px 0px 25px var(--Primary-Blue, ${props.color}))`,
                // transform: 'rotate(10deg)',
                flexShrink: 0, // Note: In camelCase for React
            }}
    >
      <ApexCharts
          options={Coptions}
          series={Coptions.series}
          type="radialBar"
      />
    </div>
  );

}

export default RingProgressBar;

in here, svg img is not fully displayed.