How to make stacked bar overlapping when the bar rounded

[Mahmoud-Skafi]

Hello world,
I'm trying to make the stacked bar overlap like this:

but I got this:

any idea of how I can achieve that.

config:

 this.chartOptions = {
      series: [
        {
          name: 'PRODUCT A',
          data: [44, 55, 41, 67, 22, 43, 44, 55, 41, 67, 22, 43],
        },
        {
          name: 'PRODUCT B',
          data: [13, 23, 20, 8, 13, 27, 11, 17, 15, 15, 21, 14],
        },
        {
          name: 'PRODUCT C',
          data: [11, 17, 15, 15, 21, 14, 13, 23, 20, 8, 13, 27],
        },
      ],
      chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        // stackType: '100%',

        toolbar: {
          show: true,
        },
        zoom: {
          enabled: true,
        },
      },
      responsive: [
        {
          breakpoint: 480,
          options: {
            legend: {
              position: 'bottom',
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      ],
      plotOptions: {
        bar: {
          horizontal: false,
          borderRadius: [30, 30, 30, 30],
          colors: {
            backgroundBarColors: ['#F2F4F6'],
            backgroundBarRadius: 30,
          },
        },
      },
      xaxis: {
        type: 'category',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        position: 'top',
        axisBorder: {
          show: false,
        },
      },
      legend: {
        position: 'bottom',
      },
      fill: {
        opacity: 1,
      },
      grid: {
        show: false,
      },
    };