Inconsistent Behavior in RadialBar and Donut Charts Between Versions 3.49.0 and 3.49.2

[aayush-makwana]

Description

We are experiencing inconsistent behavior in RadialBar and Donut charts between ApexCharts versions 3.49.0 and 3.49.2. Even though we've applied identical configurations to these charts in both versions, we're seeing variations in both the rendering and the operational behavior.

Steps to Reproduce

1. Setup the environment with ApexCharts version 3.49.0.
2. Render RadialBar and Donut charts using the specified configuration.
3. Upgrade to version 3.49.2 and use the same chart configurations.
4. Observe and document differences in chart behavior and rendering.

Expected Behavior

Charts should display and function identically across versions when using the same configurations.

Actual Behavior

Charts are displaying differently between versions 3.49.0 and 3.49.2.

Screenshots

In version 3.49.0

In version 3.49.2

[junedchhipa]

Can you paste your configuration here?

[aayush-makwana]

I am using apexchart with following configuration in my NextJS with TypeScript Project

const options: ApexOptions = {
  colors: ['#5cc86f', 'rgba( 40 199 111 / 0.7)', 'rgba( 40 199 111 / 0.5)', 'rgba( 40 199 111 / 0.16)'],
  stroke: { width: 0 },
  legend: { show: false },
  tooltip: { enabled: true, theme: 'false' },
  dataLabels: { enabled: false },
  labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
  states: {
    hover: {
      filter: { type: 'none' }
    },
    active: {
      filter: { type: 'none' }
    }
  },
  grid: {
    padding: {
      top: -22,
      bottom: -18
    }
  },
  plotOptions: {
    pie: {
      customScale: 0.8,
      expandOnClick: false,
      donut: {
        size: '73%',
        labels: {
          show: true,
          name: {
            offsetY: 25,
            color: 'rgba( 47 43 61 / 0.7)'
          },
          value: {
            offsetY: -15,
            fontWeight: 500,
            formatter: val => `${val}`,
            color: 'rgba( 47 43 61 / 0.9)',
            fontSize: '1.75rem'
          },
          total: {
            show: true,
            showAlways: true,
            label: 'Total',
            color: '#5cc86f',
            fontSize: '0.9375rem'
          }
        }
      }
    }
  },
  responsive: [
    {
      breakpoint: 1536,
      options: {
        chart: { width: 200, height: 237 }
      }
    },
    {
      breakpoint: 900,
      options: {
        chart: { width: 150, height: 199 }
      }
    }
  ]
}

<ApexCharts type='donut' width={150} height={177} series={[32, 41, 41, 70]} options={options} />